配套 学 习 侦 源 


本 书 免费 提供 了 大 量 的 超 值 学 习 资 源 。 这 些 资 源 是 读者 从 “初学 者 ”成 长 到 “资深 产品 经 理 ” 的 各 个 阶段 都 需要 的 。 其 主要 有 以 下 4 个 部 分 : 


: 同步 配套 教学 视频 一 一 适合 初学 阶段 ; 

书 中 的 案例 源 文件 一 一 适合 初学 阶段 ; 

- 原型 模板 一 一 适合 工作 中 拿 来 就 用 ; 
“原型 库 ” 项 目 一 一 适合 工作 中 提升 效率 。 

下 面 对 这 4 个 部 分 的 学 习 资 源 作 简单 介绍 。 


1. 同 步 配 套 教学 视频 一 适合 初学 阶段 


作者 按照 本 书 的 结构 和 内 容 ， 录 制 了 “小 明 学 Axure” 系 列 教学 视频 ， 如 图 1 所 示 。 该 系列 教学 视频 上 线 


oh 
XH 
出 
RN 
yx 
WN 
涤 
ny 
[EA y 
贡 | 
病 


小 明 学 Axure 系 列 第 2 评 我 的 第 一 个 原型 
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在 上 一 课 中 ,| 明 同 地 了 解 了 什么 XUTe 以 及 AUTre 的 基 李 界面 ， 恒 是 让 ,小明 同学 自 
己 守 成 一 小 原型 ， 证 是 有 些 困 难 ， 学 习 了 一 推 基础 如 肯 上 手 伏 一 个 原型 呢 ? 
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图 1 “小明 学 Axufte” 系 列 教学 视频 


2. 书 中 的 案例 源 文件 一 一 适合 初学 阶段 


本 书 提供 了 书 中 涉及 的 所 有 案例 的 源 文件 ， 如 图 2 所 示 。 读 者 可 以 一 边 阅 读本 书 ， 一 边 参 照 源 文件 动手 练习 ， 这 样 可 以 对 书 中 的 内 容 有 更 加 直观 的 认 
识 ， 从 而 逐渐 培养 自己 的 产品 意 让 


5.1.2 元 件 
-this 和 
target.rp 


5.3.2|layou .3. .3 流程 图 3 .2 自 适 应 .3 响应 式 3.3H5 小 测 ”10.3 积 分 商 。” 11.3 自 定 浆 
trp .中 Tp ird. 视图 .r Skr.r 试 .rp 城 .rp 元 件 库 . 
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图 2 本 书 案 例 源 文件 


3. 原 型 模板 一 一 适合 工作 中 拿 来 就 用 


本 书 附带 提供 了 大 量 的 原型 模板 文件 。 这 些 模 板 是 作者 在 多 年 的 工作 中 自己 原创 并 积累 下 来 的 ， 共 分 为 15 类 ， 如 图 3 所 示 。 读 者 在 今后 的 工作 中 可 以 
修改 后 直接 使 用 ， 从 而 大 大 提升 工作 效率 。 
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图 3 原型 模板 文件 


4.“ 原 型 库 ” 项 目 一 一 适合 工作 中 提升 效率 


当 读 者 积累 了 一 些 工 作 经 验 之 后 ， 融 可 以 参加 作者 的 “原型 库 ” 项 目 。 一 方面 ， 读 者 可 以 上 传 目 己 的 原型 作品 给 他 人 提供 便利 ; 另 一 方面 ， 读 者 也 可 
以 免费 获得 他 人 共享 的 海量 原型 资源 ， 如 图 4 所 示 。 这 些 原型 资源 都 是 实际 工作 中 经 常 使 用 的 ， 实 用 性 很 强 。 


局 H5-ibeacon.rp 

驻 H5- 毕 业 纪念 ,zip 

六 H5- 躁 红包 .rp 

所 H5- 抽 奖 转 盘 .rp 

加 H5- 加 密 情 书 微 信 版 .rp 

回 H5- 色 相 测试 .rp 

国 H5- 微 信 打 飞机 .rp 

四 H5- 一 条 .rp 

国 IPAD 购 物 -VOGUE. 

四 Oo2O- 房 屋 租赁 .rp 

回 O2D- 送 药 .rp 

锥 O2O- 找 药师 .rar 

四 PC 客户 端 -者 客 联系 人 管理 .rp 

操 web 电 商 -变压器 ,rp 

牛 web 后 台 -P2P 风 控 系统 报表 .rp 
加 web 后 台 -USA 进 口 车 业务 管理 系统 .rp 
回 web 后 台 - 电 科 导航 土地 深 松 管理 系统 系统 模板 .rp 
给 web 后 台 - 电 商 后 台 .rar 

回 web 后 台 - 公 众 号 数据 .rp 

辣 web 后 台 - 合 众 汽车 运输 管理 .rp 
国 web 后 台 - 医 疗 诊室 管理 平台 .rp 
六 web 后 台 - 用 户 权限 管理 .rp 

辐 web 后 台 - 招 商 银行 专业 版 .rp 

后 web 后 台 - 综 拓 系 统 .rp 

白 web 旅 游 出 行 - 蜂 皮 免 游 创 空间 .中 
回 web 旅 游 出 行 -一 起 穷游 吧 .rp 


5. 配 套 学 习 资源 获取 方式 


六 web 效 率 办 公 - 项 目 管理 协作 .rp 

为 web 效率 办 公 - 在 线 互动 会 议 室 .rp 

后 电话 通讯 -mailbox.rp 

且 电 商 -渤海 地 区 著 菜 交易 平台 .rp 

六 购物 -VOGUE.rp 

加 购物 - 百 洋 商城 -用 药 提醒 .rp 

加 购物 -一 元 村 宗 . 中 

六 购物 -邮品 汇 .rp 

后 交通 导航 -违章 处 理 .mp 

于 教育 培训 -365 好 老师 辅导 教师 预约 平台 .zip 
教育 培训 -粉笔 公 考 .rp 

六 教育 培训 -海洋 知识 .rp 

六 教育 培训 -在 线 组 卷 考试 原型 .rp 

加 教育 培训 -职工 考试 .rp 

于 全 融 理 财 - 互 金 app 助 农贸 易 贷 线 上 借款 .zip 
加 金融 理财 -金融 app.rp 

加 金融 理财 -体验 人 金 .rp 

多 丽 人 母 寻 -宝宝 时 间 .zip 

加 聊天 社交 -点 滴 .rp 

六 聊天 社交 -朋友 走 起 .rp 

锥 聊天 社交 - 趣 汇 .zip 

对 聊天 社交 - 伍 兵 .rar 

所 聊天 社交 - 鱼 墙 .rp 

加 聊天 社交 - 知 乎 .rp 

后 旅 游 出 行 -airbnb.rp 

后 旅游 出 行 - 哮 皮 免 旅 游 直销 交易 平台 .rp 


图 4 “原型 库 ” 项 目 


本 书 提供 的 配套 学 习 资 源 需 要 读者 自行 下 载 。 有 以 下 两 种 下 载 途径 : 


转 旅游 出 行 - 孙 皮 免 游 创 空间 .rp 
六 旅游 出 行 -面包 旅行 .rp 

且 旅游 出 行 -停车 管理 端 统计 .rp 
六 旅游 出 行 - 微 游 记 .rp 

六 其他- 黑 猫 云 车 .rp 

后 生活 服务 - 格 瓦 拉 电 影 .rp 

及 生活 服务 - 通 么 .rp 

加 生活 服务 -猫眼 电影 .rp 

后 生活 服务 -选举 .rp 

操 生活 实用 工具 -yahoo weather.rp 
辐 生活 实用 工具 -美食 美 家 .rp 

转生 活 实用 工具 -天 气 .rp 

六 视频 - 玖 果 视 频 4.0.rp 

国 图 像 -eyeem.rp 

加 图 像 -layout.rp 

及 网 赚 -福利 推 公众 账号 .rp 

后 网 购 - 移 动 社交 推广 APP.rp 

而 系统 工具 -smartisian 和 解锁 .rp 
六 系统 工具 -链接 泡 光 .rp 

白 效 率 办 公 -wunderlist.rp 

及 效率 办 公 - 番 茄 时 钟 .rp 

对 效 率 办 公 - 易 销 助 手 .rar 

后 效率 办 公 - 有 道 云 笔记 .rp 

及 新 闻 阅读 -36kr.rp 

白 新 闻 阅 读 -Facebook-Paperrp 
六 新 闻 阅 读 -yahoo news digest.rp 


(1) 登录 机 械 工 业 出 版 社 华章 公司 的 网 站 www.hzbook.com， 然 后 搜索 到 本 书页 面 ， 按 照 页 面 上 的 下 载 说 明 下 载 即 可 。 


(2) 天 注 并 访问 公众 号 “Axure 大 师 ”， 在 公众 号 的 相关 模块 中 进行 下 载 。 


为 提高 沟通 和 演示 的 效率 ， 越 来 越 多 的 产品 经 理 利 用 原型 设计 工具 来 表达 产品 需求 ， 这 使 得 原型 设计 工具 越 来 越 普 及 。 当 产品 经 理 设计 出 原型 并 演示 
出 来 后 ， 不 但 可 以 更 好 地 表达 产品 设计 的 想法 和 需求 ， 还 可 以 提高 和 团队 成 员 沟 通 的 效率 。 

Axure RP 软 件 是 美国 Axure 公 司 的 旗舰 产品 。 因 其 强大 的 交互 功能 和 操作 的 便捷 性 ， 目 前 已 成 为 最 流行 的 原型 设计 工具 。 作 为 一 款 专 业 的 原型 设计 
工具 ， 它 能 快速 、 高 效 地 创建 原型 ， 同 时 支持 多 人 协作 设计 和 版 本 控制 管理 。 很 多 大 公司 专业 人 士 都 将 其 作为 设计 工具 ， 包 括 产 品 经 理 、1T 咨 询 师 、 用 户 
体验 设计 师 、 交 互 设计 师 、 界 面 设计 师 、 商 业 分 析 师 及 可 用 性 专家 等 都 在 使 用 该 软件 ， 甚 至 连 一 些 架构 师 和 程序 员 也 都 在 使 用 Axure RP 软件 。 


本 书 从 初学 者 的 角度 出 友 ， 结 合 笔者 多 年 的 产品 实战 经 验 ， 以 “基础 知识 点 + 实战 操作 ”的 形式 编写 而 成 。 书 中 不 但 注重 Axure RP 常用 功能 的 讲 
解 ， 而 且 在 讲解 过 程 中 还 穿插 了 大 量 的 实战 案例 以 提高 读者 的 动手 能 力 。 


希望 通过 本 书 ， 可 以 帮助 那些 刚 开始 学 习 Axure RP 软件 的 新 手 ， 以 及 刚 成 为 产品 经 理 或 者 希望 将 来 成 为 产品 经 理 的 人 ， 能 全 面 、 快 速 地 掌握 Axure 
RP 软件 的 各 项 功能 ， 并 能 利用 该 软件 设计 出 各 种 精美 的 原型 图 ， 最 终 成 为 原型 设计 的 高 手 。 


本 书 特色 
1. 免 费 提供 大 量 的 超 值 学 习 资 源 


笔者 特意 为 本 书 录制 了 同步 配套 教学 视频 ， 以 帮助 读者 快速 、 直 观 地 学 习 。 另 外 ， 笔 者 还 分 享 了 自己 在 工作 中 积累 的 大 量 原型 模板 。 这 些 原型 模板 都 
是 笔者 杀 上 自制 作 的 ， 绝 不 会 用 “复制 + 粘贴 ”的 不 负责 方式 敷衍 读者 。 这 些 资 源 的 获取 方式 及 使 用 方法 在 本 文 之 前 的 “配套 学 习 资 源 ” 中 都 有 详细 介绍 。 


2. 内 容 全 面 ， 涵 盖 Axure RP 的 各 个 方面 


本 书 涵 苹 Axure RP 原 型 设计 的 各 个 方面 ， 包 括 样式 设置 、 交 互动 画 、 变 量 和 函数 、 动 态 面 板 、 中 继 器 、 自 适应 视图 、 模 板 和 元 件 库 等 ， 避 免 出 现 知 
识 “ 死 角 ” 的 情况 。 
3. 以 “基础 知识 后 + 实战 操作 ”的 形式 编写 


原型 设计 有 很 强 的 应 用 性 ， 所 以 本 书 尽量 结合 实用 案例 来 讲解 。 在 “做 ”中 学 习 ， 在 “做 ”中 思考 。 另 外 ， 对 于 必 学 知识 点 ， 笔 者 进行 了 精心 亚 选 、 
优化 和 总 结 ， 并 对 原型 制作 背后 的 Axure RP 软 件 运 行 机 制 与 原理 也 做 了 深入 剖析 。 


4. 大 量 采 用 来 自 一 线 的 真实 案例 ， 选 例 多 样 


笔者 是 有 多 年 原型 设计 经 验 的 一 线 产 品 经 理 ， 手 头 积累 了 大 量 的 一 线 原型 设计 实战 案例 。 为 了 适应 当前 原型 设计 的 实际 需要 ， 书 中 的 案例 特意 选择 了 
网 站 和 APP 两 大 领域 。 这 些 案例 大 多 数 是 笔者 化 费 了 很 多 心血 的 原创 作品 ， 还 有 一 些 是 笔者 对 精彩 交互 作品 的 借鉴 。 通 过 这 些 案例 ， 笔 者 分 享 了 大 量 很 实 
用 的 设计 技巧 ， 以 及 比较 前 沿 的 设计 理念 。 可 以 说 ， 本 书 是 一 本 实战 性 超 强 、“ 干 货 ” 特 多 的 原型 设计 书 。 


5. 图 文 并 成 ， 讲 解 细致 


本 书 在 讲解 案例 时 ， 给 出 了 明确 的 设计 思路 和 详细 的 制作 步骤， 并 提供 了 大 量 的 图 片 来 展示 设计 过 程 和 实际 效果 ， 读 者 只 要 按照 书 中 的 步骤 一 步 步 操 
作 ， 便 可 完成 作品 。 


6. 利 用 最 新 的 技术 进行 创新 


本 书 在 介绍 将 第 三 方 平台 的 技术 融入 到 原型 制作 中 时 ， 给 出 了 一 些 独特 而 创新 的 原型 制作 拉 1I5。 例 如 ,使 用 “百度 地 图 ”及 “新 瀛 云 ” 等 第 三 方 平台 
制作 原型 案例 。 


7. 结 合 工作 经 验 ， 介 绍 团队 协作 近 巧 

本 书 除了 讲解 Axure RP 软件 功能 及 其 原型 设计 外 ， 还 介绍 了 实际 产品 研发 过 程 中 涉及 的 工作 流程 、 团 队 配 合 、 沟 通 拷 巧 ， 以 及 交互 设计 的 一 些 弟 识 
和 行业 惯例 。 这 些 知识 将 有 助 于 读者 成 为 一 名 合格 的 产品 经 理 。 
本 书 内 容 


本 书 共 12 章 。 书 中 的 大 部 分 章节 由 基础 知识 和 进 阶 实战 案例 两 个 部 分 组 成 ， 便 于 读者 在 学 习 了 Axure RP 软件 的 基础 知识 后 可 以 将 其 应 用 于 实际 案例 
中 ， 从 而 加 强 对 原型 设计 的 理解 。 下 面 对 各 章 的 内 容 作 一 个 简要 的 介绍 。 


第 1 章 Axure RP 基础 ， 首 先 介 绍 了 Axure RP 的 基础 概念 和 软件 界面 ， 让 读者 对 该 软件 有 一 个 初步 了 解 ， 然 后 市 领 读者 开始 实 跤 一 制作 第 一 个 原 


第 2 草 样式 设置 ,介绍 了 颜色 、 阴 影 、 文 字 格 式 、 绘 制图 形 和 交互 样式 等 常用 的 设计 原型 静态 样式 的 方法 ， 最 后 应 用 这 些 方法 给 不 同 模 块 制作 背景 设 
计 、 网 站 原型 和 APP 原 型 。 


第 3 章 原型 设计 准则 ， 参 考 笔者 的 产品 实战 经 验 ， 总 结 了 一 些 原则 性 和 方向 性 的 建议 。 


第 4 章 交 互动 画 ， 介 绍 了 和 触 必 事件、 用 例 、 条 件 和 区 互动 作 的 含义 ， 并 介绍 了 如 何 用 动态 面板 做 交互 动画 ， 最 后 通过 几 个 精彩 的 交互 案例 加 深 读 者 对 
交互 的 理解 。 


第 5 章 数据 操作 ， 介 绍 了 如 何 使 用 变量 、 阔 数 和 中 继 器 操作 原型 中 的 数据 ， 并 通过 案例 市 领 读 者 学 习 如 何人 在 原型 中 实现 数据 的 增加 、 删 除 、 修 改 、 碍 
看 ， 以 及 利用 数据 实现 更 加 高 级 的 交互 动画 。 


第 6 章 复杂 原型 的 规划 ， 介 绍 了 如 何 规划 原型 结构 ， 让 复杂 的 原型 变 得 容易 修改 ， 从 而 实现 快速 迭代 。 

第 7 章 市 地 图 的 原型 ， 介 绍 了 使 用 地 图 开放 平台 制作 地 图 页 面 ， 并 把 地 图 页 面 加 入 原型 之 中 。 

第 8 章 响应 式 原型 设计 ， 介 绍 了 使 用 自 适 应 视图 的 方法 ， 从 而 让 读者 形成 响应 陈设 计 思 维 。 

第 9 章 手 机 上 可 访问 的 原型 ， 介 绍 了 利用 云 平 台 分 享 原 型 ， 并 介绍 了 如 何 设置 原 型 尺寸 及 视 口 标签 ， 从 而 让 原型 能 在 手机 上 展示 。 
第 10 章 母 版 ， 介 绍 了 如 何 利用 母 版 提升 制作 原型 的 效率 。 

第 11 章 元 件 库 ， 介 绍 了 如 何 使 用 元 件 库 来 制作 自己 的 元 件 库 。 


第 12 章 团队 协作 ， 介 绍 了 团队 项 目的 创建 和 使 用 ， 并 学 习 团 队 协 作 的 方法 。 
本 书 读者 对 稼 
1. 完 全 没有 基础 的 初学 者 


如 果 你 完全 不 会 使 用 Axure RP 软 件 ， 更 没有 设计 过 原型 ， 那 么 本 书 是 你 的 理想 选择 。 你 可 以 通过 本 书 一 步 步 学 握 Axure RP 的 基础 知识 ， 并 能 参照 书 
中 的 案例 来 提高 目 己 的 软件 使 用 水 平和 原型 设计 能 力 。 


2. 简 单 接触 过 Axure RP 的 学 习 者 


如 果 你 在 阅读 本 书 之 前 简单 接触 过 Axure RP 软件 ， 那 么 本 书 还 可 以 帮 你 更 加 系统 地 学 习 Axure RP 的 各 项 功能 。 除 了 提升 软件 使 用 水 平 外 ， 你 还 可 以 
从 本 书 中 获得 大 量 的 产品 设计 实战 经 验 ， 以 及 交互 设计 的 实用 技 15。 


3. 正 在 使 用 Axure RP 进行 原型 设计 的 产品 经 理 


如 果 你 是 一 个 产品 经 理 ， 那 么 本 书 也 非常 适合 你 在 工作 中 随 查 随 用 。 而 且 本 书 免费 提供 的 大 量 学 习 资源 也 将 是 你 工作 中 的 得 力 助手 ， 可 以 帮助 你 大 大 
提升 工作 效率 。 


天 于 作者 


本 书 由 吉 托 主笔 编写 。 另 外 ， 苏 昊 明 等 人 也 参与 了 本 书 的 写作 。 本 书 主笔 碍 托 曾经 参与 设计 过 多 个 原型 产品 ， 积 累 了 大 量 的 原型 设计 经 验 ， 还 通过 公 
众 号 “Axure 大 师 ” 分 享 了 大 量 的 Axure RP 学 习 教 程 、 案 例 和 模板 文件 。 


联系 我 们 


虽然 我 们 对 书 中 所 述 内 容 都 尽量 核实 ， 并 多 次 进行 文字 校对 ， 但 因 时 间 所 限 ， 加 之 水 平 所 限 ， 书 中 可 能 还 人 存 在 疏漏 和 错误 ， 敬 请 广大 读者 批评 和 指 
正 。 联 系 我 们 请 发 电子 邮件 到 hzbook2017@163.com。 


第 1 章 ”Axure RP 基础 


本 章 将 介绍 Axure RP 的 基础 知识 。 首 先 介 绍 Axure RP 的 用 途 ， 通 过 一 些 案例 ， 让 读者 了 解 Axure RP 可 以 做 出 什么 样 的 原型 。 然 后 开始 介绍 Axure RP 软 


件 界 面 。 最 后 带领 读者 利用 所 学 的 基础 知识 动手 做 出 第 一 个 原型 。 


1.1 Axure RP 是 干什么 用 的 


本 节 将 介绍 Axure RP 在 实际 工作 中 的 作用 ， 并 展示 几 个 Axure RP 做 出 的 案例 ， 了 解 Axure RP 可 以 做 出 什么 样 的 原型 。 


1.1.1 Axure RP 是 原型 设计 软件 


Axure RP 是 一 款 专 业 的 原型 设计 软件 ， 是 最 流行 的 原型 设计 工具 之 一 。 它 能 快速 、 高 效 地 演示 产品 ， 准 确 地 表达 产品 设计 人 员 的 意图 和 想法 。 
Axure RP 的 特点 是 交互 功能 非常 强大 ， 不 需要 写 一 行 代码 ， 束 能 实现 非常 复杂 的 交互 效果 。 其 台 真 的 交互 效果 能 准确 地 传达 设计 者 的 意图 。 
在 互联 网 公司 ， 原 型 贯穿 于 整个 产品 开发 流程 中 。 

需求 分 析 阶 段 : 产品 经 理 根据 用 户 需求 通过 Axure RP 制作 出 产品 的 原型 。 


- 产品 讨论 阶段 : 原型 制作 完成 后 ， 产 品 经 理 可 以 给 客户 、 领 导 和 同事 演示 原型 。 相 比 随手 绘制 的 草图 、 示 意图 ， 可 交互 的 Axure RP 原型 可 以 让 大 家 
更 加 直观 地 看 到 未 来 产品 的 样子 ， 便 于 团队 进行 讨论 和 修改 。 在 获取 反馈 后 ， 可 在 Axure RP 中 即时 修改 原型 ,快速 形成 一 个 大 家 共同 认可 的 产品 设计 。 


“ UI 设计 阶段 : 设计 部 门 的 同事 会 参考 原型 ， 做 出 界面 的 设计 图 。 
“ 研发 阶段 : 研发 部 门 的 同事 会 参考 原型 ， 实 现 产品 的 各 项 功能 


产品 开发 就 这 么 一 步 一 步 实 现 了 。 可 以 说 ， 制 作 原 型 是 产品 经 理 必 备 的 技能 。 学 习 制 作 优秀 的 原型 是 成 为 产品 经 理 的 第 一 步 。 


1.1.2 ”Axure RP 原型 案例 


Axure RP 最 初 的 版 本 是 用 来 制作 网 页 原型 的 。 但 是 随 着 功能 的 迭代 和 周边 资源 的 完善 ， 现 在 的 Axure RP 已 经 可 以 制作 各 种 互联 网 产品 的 原型 了 。 下 
面 列举 一 些 案例 ，。 


1. 电 商 网 站 原型 


Axure RP 可 以 做 出 页 面 跳 转 、 切 换 、 弹 窗 等 常用 的 交互 效果 。 例 如 ， 图 1-1 中 的 原型 可 以 按 类 别 、 价 格 范围 筛选 商品 列表 。 单 击 “ 排 序 ” 按 钮 ， 可 以 
弹出 选择 排序 方式 菜单 ; 单 击 商品 图 ， 可 以 进入 商品 详情 页 面 。 该 电 商 网 站 原型 功能 完备 ， 甚 至 可 以 完成 下 单 功能 ， 除 了 商品 不 会 邮寄 到 家 ， 其 他 购物 流 
程 的 体验 完全 可 以 做 到 和 真实 电 商 网 站 一 模 一 样 。 


2. 数 据 后 台 原 型 


Axure RP 的 控件 非常 丰富 ， 简 单 组合 就 能 做 出 折线 图 、 饼 图 等 各 种 图 形 。 如 图 1-2 所 示 的 折线 图 就 是 用 “水 平 线 ” 元 件 变 形 画 出 来 的 ;图 1-2 中 的 饼 
图 是 用 “椭圆 形 ”“ 饼 图 ”元 件 组 合 画 出 来 的 。 
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图 1-1 ” 电 商 网 站 原型 
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图 1-2 ”数据 后 台 原 型 
3. 直 播 APP 原 型 


Axure RP 的 排版 、 图 片 剪 裁 、 编 辑 功能 非常 强大 。 如 图 1-3 所 示 ， 图 1-3a 中 正方 形 的 原 图 编辑 出 了 圆 角 ， 图 1-3b 中 正方 形 的 头像 剪裁 为 圆 形 。 


Axure RP 可 以 模拟 APP 的 列表 滑动 、 页 面 切换 等 交互 效果 。 例 如 图 1-4a 中 的 标签 可 以 横向 滑动 ， 列 表 可 以 竖 向 滑动 ， 单 击 图 片 可 以 切换 到 图 1-4b 的 
页 面 ， 并 且 灵 活 运 用 “内 部 框架 ”“ 动 态 面 板 ” 等 元 件 ， 可 以 模拟 播放 视频 、 友 弹 幕 的 效果 。 


头像 勇 裁 为 圆 形 


编辑 出 了 圆 角 
图 1-3 ”直播 APP 原 型 
4. 社 交 APP 原 型 


Axure RP 可 以 方便 地 做 出 透明 、 阴 影 等 效果 ， 如 图 1-4 中 顶部 图 片上 的 半 透 明 庶 日 ， 底 部 按钮 上 的 阴影 等 。 


Axure RP 可 以 模拟 关注 好 友 后 页 面 状 态 的 改变 ， 以 及 聊天 时 发 送 文字 及 自动 回复 等 效果 。 


Lorem IPSUI dolor stt amet sonsectetur 
adipiseing allt. Aeneamn euismod Bibendum 
Laoreet 


图 1-4 社交 APP 原 型 


5. 竺 办 事项 APP 原 型 


Axure RP 中 最 复杂 的 功能 残 是 数据 管理 功能 。 例 如 图 1-5 所 示 的 待 办 事项 APP 原 型 ， 可 以 实现 数据 输入 、 保 人 存 和 删除 效果 。 


在 图 1-5b 的 输入 框 中 可 以 输入 任意 文字 。 输 完 后 ， 按 Enter 键 即 可 将 输入 的 文字 作为 标题 ， 新 增 竺 办 事项 。 新 增 的 竺 办 事项 会 显示 在 下 方 询 表 中 。 单 
击 列表 右 侧 的 星 形 按钮 ， 可 以 用 来 标识 重要 的 待 办 事项 。 单 击 义 选 左 侧 的 复 选 框 ， 会 将 待 办 事项 标记 为 “已 完成 ”。 “已 完成 ”的 竺 办 事项 会 移入 “已 完 
成 ”列表 。 


6 收 件 箱 


jituo | 做 Wunderlist 原 型 证 
ltuosnitiealive.cn 


| 收 件 箱 “| 做 yahoo weather 原 型 


指派 给 我 | 做 airbnb 原 型 高 


生活 打扫 房间 


一 明天 


必 看 电影 


611 个 -已 完成 性 务 


图 1-5 ” 待 办 事项 APP 原 型 


1.1.3 ”使 用 Axure RP 原型 


Axure RP 做 出 的 原型 可 以 友 布 成 网 页 形式 。 上 面 案 例 中 的 原型 友 布 的 网 页 都 可 以 上 传 到 官方 或 自 建 的 服务 器 上 。 将 网 站 原型 的 网 址 友 给 他 人 访问 ， 
几乎 能 以 假 乱 真 。 将 APP 原 型 调整 到 合适 的 尺寸 后 ， 原 型 可 以 直接 在 手机 上 访问 ， 惑 像 在 使 用 一 个 真正 的 APP。 


1.2 基础 概念 


本 节 将 按 顺序 介绍 Axure RP 软件 界面 上 各 个 区 域 的 功能 ， 熟 悉 Axure RP 的 基础 操作 。 然 后 对 涉及 的 功能 进行 解释 ， 掌 握 Axure RP 的 基础 概念 。 


1.2.1 ”软件 界面 概述 


在 学 习 制 作 原 型 之 前 ， 先 来 了 解 一 下 Axure RP 软件 的 界面 。 

如 图 1-6 所 示 ，Axure RP 的 界面 包括 如 下 几 部 分 。 
(1) 菜单 : 包括 文件 、 编 辑 、 视 图 、 项 目 、 布 局 、 友 布 、 团 队 、 账 户 和 帮助 。 文 件 的 管理 、 软 件 的 设置 等 功能 可 以 在 菜单 中 找到 |。 
(2) 快捷 功能 : 画笔 、 对 齐 等 常用 的 功能 按钮 都 平 铺 在 这 里 。 


(3) 站 点 地 图 : Axure RP 可 以 制作 多 个 页 面 的 原型 。 在 站 点 地 图 里 可 展示 多 个 页 面 的 层级 天 系 。 


(4) 元 件 库 : “文字 ” “图 片 ”“ 和 输入 框 ” “按钮 ”等 所 有 元 件 都 放 人 在 这 里 。 原 型 残 是 由 这 些 元 件 组 成 的 。 

(5) 母 版 : 多 个 元 件 可 以 组 成 一 个 母 版 。 母 版 可 以 在 多 个 页 面 中 重复 使 用 。 例 如 ， 网 站 导航 栏 束 可 以 组 成 一 个 母 版 在 每 个 页 面 中 使 用 。 
(6) 画布 : 画布 是 用 来 画 原 型 的 地 方 。 男 原型 的 过 程 就 是 把 元 件 从 元 件 库 中 拖 忠 到 画布 上 组 成 原型 。 

(7) 属性 设置 : 设置 元 件 的 样式 和 动作 属性 。 动 作 属 性 是 实现 交互 动画 的 主要 手段 。 


(8) 元 件 地 图 : 元 件 地 图 可 展示 页 面 上 所 有 元 件 的 层级 关系 。 元 件 的 层级 关系 一 般 是 通过 一 个 叫做 “动态 面板 ”的 元 件 来 管理 的 。 所 以 这 里 主要 用 
来 查看 和 管理 “动态 面板 ”。 


pp 末 命 名 - Axure RP 8 团队 版 ; axureuser 已 授权 < 中 文 支持 : www.iaxure.com 提 供 > 版 本 : V1.34 


菜 单 文件 (F) 编 旺 (E) 视图 (Vv) 项 目 (P) 布局 (A) 发 布 () 国 队 ( 账户 (C) 帮助 [H) 
ma 园 rs 关 和 担 哲 


= 同 字 请 。。 
快捷 功能 一 > 时 | 


i Default 
由 天 地 一 页 面 排列 
六 及 颜色 
上 
属性 设置 
元 件 库 
母 版 元 件 地 图 
画布 
图 1-6 ”Axure RP 界面 说 明 
里 然 Axure RP 的 界面 看 起 来 有 些 复杂 ， 但 是 有 些 功 能 在 实际 工作 中 很 少 用 到 。 为 了 让 读者 能 快速 掌握 Axure RP， 下 面 重点 介绍 最 常用 的 功能 ， 并 解 


释 其 中 难 懂 的 概念 。 其 他 功能 将 放 在 后 面 ， 在 读者 有 一 定 基础 之 后 再 介绍 。 


提示 : 
如 果 不 小 心 关闭 了 界面 上 的 窗口 ， 可 以 利用 菜单 “视图 ” | “功能 区 ”命令 重新 打开 。 
1.2.2 ”画布 


Axure RP 软件 界面 中 心 区 域 束 是 画布 ， 如 图 1-7 所 示 。 一 般 把 制作 原型 的 过 程 叫做 “ 画 原 型 图 ”。 原 型 就 是 在 画布 上 画 出 来 的 。 
画布 分 为 以 下 3 部 分 。 

(1) 中 间 空 日 区 域 用 来 放置 “元 件 ”。Axure RP 是 所 见 即 所 得 的 ， 画 布 上 元 件 摆 成 的 样子 基本 上 残 是 最 终 原 型 的 样子 。 

(2) 顶部 是 页 面 标 签 。 标 签 上 显示 页 面 的 标题 。 页 面 的 标题 可 以 在 站 点 地 图 中 修改 。 


(3) 左边 和 上 边 是 标尺 。 上 面 的 刻度 是 坐标 (单位 : 像素 ) ， 与 计算 机 显示 器 的 分 辨 率 (单位 : 像素 ) 对 应 。 


图 1-7 ”画布 


设计 原型 前 融 应 该 考虑 好 原型 要 在 什么 设备 上 展示 ， 按 目标 设备 的 分 辨 率 规划 原型 的 大 小 。 


计算 机 显示 器 的 分 辨 率 与 原型 的 坐标 值 是 对 应 的 。 但 是 ， 手 机 的 分 辨 率 与 原型 的 坐标 值 不 是 1 : 1 的 。 例 如 ， 如 果 想 让 原型 在 iPhone 7 上 的 显示 效果 
最 佳 ， 那 么 原型 应 该 做 成 多 大 好 呢 ” 第 9 章 会 给 出 答案 。 


小 知识 : 
画布 上 有 一 些 快 捷 操 作 : 
(1) Ctrl+ 鼠 标 滚 轮 ， 用 于 放大 缩小 页 面 。 


(2) Shift+ 鼠标 滚轮 ， 用 于 横向 滑动 页 面 。 


1.2.3 ”坐标 


元 件 是 放置 在 画布 上 的 。 元 件 在 画布 上 的 位 置 通过 坐标 来 描述 。 元 件 的 坐标 值 指 的 是 元 件 左上 角 那 个 点 的 坐标 值 。 例 如 ， 图 1-8 中 文本 框 的 坐标 是 
x=0，y=0。 按 钮 的 坐标 是 x=212，y=130。 


坐标 零点 
文本 框 


按钮 坐标 点 
BUTTON 位 置 尺 寸 提示 


图 1-8 ”坐标 
光标 停 在 元 件 边缘 时 ，Axure RP 会 自动 提示 元 件 的 坐标 、 尺 寸 。x 为 横 坐 标 ，y 为 纵 坐 标 ，w 为 宽度 ，h 为 高 度 。 


从 标尺 上 可 以 看 出 ， 横 坐标 越 向 右 值 越 大 ， 纵 坐标 越 向 下 值 越 大 。 坐 标 值 为 负数 时 ， 元 件 会 超出 屏幕 显示 范围 。 


1.2.4 ”元 件 库 


做 原型 的 过 程 束 像 是 搭 积 木 一 一 把 元 件 库 里 的 元 件 拖 忠 到 画布 上 ， 设 好 颜色 、 大 小 ， 殊 能 “ 搭 ” 出 想 做 的 网 站 /APP 的 样子 。 


Axure RP 默认 的 元 件 库 中 提供 了 多 种 元 件 ， 如 图 1-9 所 示 。 


主要 按钮 链接 按钮 
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图 1-9 ”Axure RP 默认 的 元 件 库 


下 面 分 别 介 绍 这 些 元 件 。 


1. 图 形 类 元 件 
如 图 1-9 中 的 矩 形 1、 和 矩形 2、 和 矩 形 3、 椭 圆 形 和 后 面 的 占 位 符 都 属于 图 形 类 的 元 件 。 把 它们 拖 忠 到 画布 上 如 图 1-10 所 示 。 
` 单 击 元 件 ， 可 以 将 其 选中 。 
` 抑 引 元件， 可 以 移动 位 置 。 


` 拖 及 元 件 边缘 ， 可 以 改变 大 小 。 


. 双击 元 件 ， 可 以 在 元 件 上 输入 文字 。 


占 位 符 


图 1-10 图形 类 元 件 


在 上 方 的 快捷 功能 区 (如 图 1-11 所 示 ) 可 以 设置 元 件 的 文字 格式 ， 元 件 本 身 的 颜色 、 阴 影 效果 ， 以 及 边缘 线 的 颜色 、 形 式 。 


文字 设置 颜色 、 阴 影 。 ”边缘 线 
i ES | 
‘Ss | 一， 人 


Arial -| Normal w|i13 =| 了 Yi 7|| 圭 


图 1-11 快捷 功能 区 
提示 : 
短 形 2 和 疆 形 3 没有 边缘 线 。 


图 形 类 元 件 可 以 用 来 制作 原型 中 的 分 隔 框 、 背 景 、 按 钮 等 ， 其 他 用 途 有 待 用 户 在 使 用 中 发 据 。 其 中 ， 占 位 符 常常 用 来 代表 图 片 。 如 图 1-12 中 的 占 位 
符 用 来 表示 页 面 顶 部 的 轮 播 图 。 


图 形 类 元 件 可 以 改变 形状 ， 如 图 1-13 所 示 。 单 击 矩 形 ， 右 上 角 会 出 现 一 个 “小 圆 球 ”。 单 击 小 圆 球 ， 弹 出 形状 菜单 。 单 击 其 中 任意 一 个 图 形 (如 五 
角 星 ) ， 和 矩形 就 会 变 为 五 角 星 。 所 有 的 图 形 类 元 件 都 可 以 相互 转换 。 


鼎 位 符 元 件 


根 圆 形 元 件 


占 位 符 元 件 


图 1-12 ”用 占 位 符 表 示 轮 播 图 
Q@ 右 上 角 会 出 现 “ 小 圆 球 ” ”名 单 击 五 角 星 变 为 五 角 星 


index > 


a ) 转换 前 b ) 转换 后 
图 1-13 图 形 类 元 件 转换 形状 
如 图 1-14 是 图 形 类 元 件 的 一 些 应 用 。 


除了 上 述 图 形 ，Axure RP 还 支持 用 “钢笔 ”功能 男 出 任意 形状 。 这 个 功能 在 第 2 草 会 详细 介绍 。 


情 贺 形 


煞 量 关系 入 入 志和 
判断 推理 六 * 


资料 分 析 * 


图 1-14 图形 类 元 件 
2. 按 钮 类 元 件 
按钮 类 元 件 包括 按钮 、 主 要 按钮 和 链接 按钮 ， 添 加 到 画布 上 后 如 图 1-15 所 示 。 
: 按钮 : 是 预先 设置 了 倒 角 、 加 了 文字 的 珑 形 。 
. 主要 按钮 : 是 预先 设置 了 填充 颜色 的 按钮 。 


` 链接 按钮 : 是 没有 边缘 线 的 按钮 。 


BUTTON BUTTON 


a ) 按钮 b ) 主要 按钮 


图 1-15 ”按钮 类 元 件 
其 实 ， 按钮 类 元 件 也 属于 图 形 类 元 件 ， 只 是 样式 不 同 而 已 。 
3. 图 片 元 件 


把 图 片 元 件 添加 到 画布 上 后 如 图 1-16 所 示 。 


三 角形 


BUTTON 


C ) 链接 按钮 


图 1-16 图 片 元 件 


图 片 元 件 可 以 像 “ 占 位 符 ” 一 样 用 来 代表 图 片 。 


双击 图 片 元 件 ， 会 弹出 文件 对 话 框 ， 选 择 一 张 图 片 即 可 添加 图 片 到 原型 中 。 不 过 ，Axure RP 也 支持 直接 将 图 片 复 制 (Ctrl+C) 、 粘 贴 (Ctrl+V) 到 
画布 上 。 所 以 ， 实 际 工 作 中 ， 除 非 有 动态 加 载 的 需求 ， 人 否则 很 少 通过 图 片 元 件 来 添加 图 片 。 


下 面 举 一 个 通过 图 片 元 件 来 动态 加 载 图 片 的 例子 。 


如 图 1-17a 是 一 个 照片 编辑 工具 的 原型 。 这 个 页 面 需要 动态 加 载 上 一 个 页 面 中 用 户 选择 的 照片 。 原 型 中 ， 这 个 页 面 上 放置 了 4 个 图 片 元 件 来 占 位 。 上 
一 个 页 面 中 通过 交互 动作 记录 用 户 选中 的 照片 。 读 取 这 个 页 面 时 ， 设 置 交互 动作 动态 加 载 照片 ， 如 图 1-17b 所 示 。 第 5 章 会 对 这 个 案例 做 详细 介绍 。 


翻转 


b ) 友 布 后 的 效果 


图 1-17 动态 加 载 图 片 


4. 文 字 元 件 


把 一 级 标题 、 二 级 标题 、 三 级 标题 、 文 本 标签 、 文 本 段落 添加 到 画布 上 后 如 图 1-18 所 示 。 


100 


一 级 标 圳 
二 级 标题 
三 级 标题 


驻 本 标 等 


Lorem IPsum dolor st amet consectetur adipliscing 
ellt. Aenean eulismod blbendum laoreet. Proin 
gravida dolor sit amet lacus accumsan et viverra 


| justo commodo. Proin sodales pulvinar tempor. Cum 


SOCIS natoque penatibus et magnls dis parturient 
montes, nascetur ridiculus mus. Nam fermentum, 
nulla luctus pharetra vulputate felis tellus mollis orcl， 
sed rhoncus saplien NUnc Bdet. 


图 1-18 ”文字 元 件 


文字 元 件 通常 用 来 制作 原型 中 的 标题 、 人 简介 和 正文 等 。 


双击 文字 元 件 ， 即 可 直接 修改 文字 。 


通过 快捷 功能 区 (如 图 1-19 所 示 ) ， 可 以 设置 文字 的 字体 、 颜 色 和 格式 。 


图 1-19 ”设置 文字 的 字体 、 颜 色 和 格式 


原型 中 通常 要 将 文字 设置 为 不 同 的 样式 ， 以 此 强调 或 弱化 不 同 信息 的 重要 程度 ， 如 图 1-20 所 示 。 


加 粗 强 调 
要 灰 弱化 


大 字 强 调 
小 字 弱化 


25. 水平线 和 垂直 续 


项 目 介绍 


大 爱 清 尘 从 2013 年 开始 关注 尘肺 家 庭 珀 儿 生 活 学 习 问 题 ， 
目前 已 资助 141 人次。 我 们 号 召 肝 心 网 友 关 注 更 密 像 ' 只 条 


『 15 个 土豆 " 一 生 的 家 话 。 促 在 湖北 口 多 一 地 ， 不 完全 统计 的 


下 年 核 查 ) 需要 帮助 ， 此 次 善 蒜 除 
部 分 用 于 陈 广 新 家 许 ， 其 它 家 庭 会 近 照 大 爱 清 小 资助 标 


参与 者 排名 


图 1-20 ”文字 的 不 同样 式 


水 平 线 和 垂直 线 通 弟 用 来 制作 原型 中 的 分 隅 线 和 箭头 等 。 


水 平 线 和 垂直 线 可 以 改变 线 的 粗细 、 虚 实 、 


a ) 水 平 线 和 垂直 续 


颜色 ， 并 且 可 以 增加 箭头 ， 如 图 1-21 所 示 。 


变 绿 哩 调 


b ) 加 粗 、 加 箭头 的 水 平 线 和 虚线 垂直 线 


图 1-21 水 平 线 和 垂直 线 可 以 改变 粗细 、 虚 实 并 增加 箭头 


6. 热 区 


“ 热 区 ”在 Axure RP 的 画布 上 看 起 来 是 一 个 浅 绿色 矩形 ， 如 图 1-22 所 示 。 其 实 原 型 友 布 之 后 ， 热 区 是 透明 的 。 


热 区 有 什么 作用 呢 ? 其 可 以 扩大 扣 击 区 域 。 


例如 ， 图 1-23 的 原型 交互 效果 是 用 户 点 击 “ 标 签 ” 那 一 行进 入 个 人 相册 页 面 。 如 果 没 有 热 区 ， 要 实现 这 个 效果 需要 把 “小 机 册 ”4 个 字 、 图 片 及 底部 


日 框 都 设置 上 交互 动作 。 有 了 热 区 则 可 以 在 3 个 元 件 上 放 一 层 透 明 的 热 区 ， 然 后 只 在 热 区 上 设置 交互 动作 即 可 。 
如 图 1-23 中 的 绿色 部 分 就 是 热 区 。 热 区 把 点 击 区 域 扩大 到 了 整 行 。 


INdex 


0 100 


100 


图 1-22 热 区 


《 证 山 信 筷 


| 备注 


地 区 


图 1-23 “ 热 区 ”可 以 扩大 点 击 区 域 


7. 内 联 框 架 


内 联 框架 放 在 画布 上 如 图 1-24 所 示 。 


内 联 框架 可 以 链接 到 原型 内 的 页 面 或 外 部 网 页 。 双 击 内 联 框架 ,会 弹出 设置 链接 的 对 话 框 ， 如 图 1-25 所 示 。 


Index > 
0 


图 1-24 ”内 联 框 架 


| RP 链接 属性 


| 打开 位 置 
而 | 链接 到 当前 项 目的 尘 个 页 面 


[ 
| || index 

[| paget 

口 page2 

[| page3 


品 链接 到 ur| 或 文件 


| 


图 1-25 ”设置 内 联 框 架 链接 


` 链接 到 当前 项 目的 某 个 页 面 : 可 以 让 当前 原型 中 其 他 页 面 出 现在 内 联 框 架 所 在 的 位 置 。 


“ 链接 到 URL 或 文件 : 可 以 让 任意 网 站 的 网 页 出 现在 内 联 框 架 所 在 的 位 置 ， 包 括 网 络 视频 。 通 过 视频 网 站 的 视频 分 享 功 能 获取 分 享 链 接 ， 在 超 链 接 输 
入 框 中 填写 视频 的 分 享 链 接 ， 就 可 以 实现 在 原型 中 显示 视频 的 效果 。 


8. 动 态 面板 


动态 面板 放 在 画布 上 后 如 图 1-26 所 示 。 


动态 面板 


元 忻 角 上 
State1 


可 时 疗 | 色 


[| index 
4 坊 (动态 面板 ) 
动态 面板 [EL 


图 1-26 动态 面板 


新 建 的 动态 面板 在 元 件 地 图 上 显示 为 两 行 ， 如 图 1-26 中 的 标注 框 所 示 。 其 中 ， 第 一 行 是 动态 面板 ， 第 二 行 是 动态 面板 的 一 个 状态 ， 名 称 为 State1。 
动态 面板 可 以 添加 多 个 状态 。 


动态 面板 和 状态 是 什么 天 系 呢 ?” 打 个 比方 ， 动 态 面板 相当 于 一 个 卡片 使， 状态 相当 于 卡片 。 一 个 卡片 盒 可 以 疼 多 张 卡 片 ， 但 只 有 最 上 面 的 一 张 卡 片 可 
以 仆人 看 到 。 


动态 面板 常用 来 制作 子 页 面 。 如 图 1-27 所 示 案 例 中 ， 需 要 给 APP 制 作 3 个 子 页 面 ,分 别 是 “慈善 项 目 ”“ 跑 团 ” “我 的 ”页 面 。 


从 - Farnaily 


本 园 落 善 项 目 


居 商 遇 训 盘 碍 控 芒 
先 亿 儿童 的 " 心 ` 生 


先 心 儿 草 的 心 生 


b ) 跑 团 页 面 C ) 我 的 页 面 


图 1-27 需要 制作 3 个 子 页 面 


制作 原型 时 ， 先 添加 一 个 动态 面板 ， 然 后 在 动态 面板 中 添加 3 个 状态 ， 再 分 别 在 每 个 状态 中 制作 一 个 子 页 面 ， 如 图 1-28 所 示 。 


伟 育 是 ii 有 有 疝 控 宫 


斌 下川 [ 国 的 必 生 


属性 


,| Default 


页 面 排列 
背景 颜色 
导入 || 活 宰 


| 回 | 回 | 四 | | 画 | 回 | 国 


趟 重复 vv 


门 index 
| 里 frame (动态 面板 ) 
bb 画 花 蔡 项 目 


动态 面板 的 3 个 状态 。m 中 轩 


bp 画 我 的 


原型 的 3 个 子 页 面 


图 1-28 动态 面板 的 3 个 状态 对 应 3 个 页 面 


在 元 件 地 图 中 双击 状态 名 称 可 以 进入 状态 的 页 面 ， 如 图 1-29 所 示 。 


frame / 慧 区] 项目 lindex) 


167 


| 体育 助 训 碳 夯 措 井 


制作 完 3 个 状态 之 后 。 默 认 情 况 下 ， 


属性 
位 置 * 尺 十 

21 

x 四 坐标 

0 

元 性 角度 


慈善 项 目 


[ index 
4 坊 frame ( 动 杰 面板 ) 
当前 选中 的 页 面 一 一 一 各 = 全 关 夺 上 
kb 画 棉 团 
六 可 我 的 


图 1-29 “慈善 项 目 ” 状 态 页 面 


“慈善 项 目 ” 状 态 在 最 上 层 ， 所 以 只 能 看 到 “慈善 项 目 ” 页 面 。 通 过 一 些 交 互 设置 ， 可 以 实现 点 击 底部 导航 栏 ， 


切换 显示 其 他 两 个 子 页 面 的 效果 。 具 体 的 设置 方法 会 在 第 4 章 中 详细 介绍 。 


9. 中 继 器 


中 继 器 在 画布 上 的 样子 如 图 1-30 所 示 。 可 以 看 到 ， 中 继 器 元 件 有 3 个 矩形。 双击 中 继 器 ， 进 入 中 继 器 的 页 面 ， 如 图 1-31 所 示 。 在 中 继 器 页 面 中 只 有 一 


个 矩形。 


中 继 器 的 作用 就 是 “复制 ”， 其 实 中 继 器 翻译 为 


件 做 调整 。 


例如 ， 图 1-30 中 的 中 继 器 的 复制 次 数 是 3， 


“复制 器 ”更 准确 些 。 中 继 器 可 以 设置 复制 的 次 数 、 新 的 复制 品 如 何 摆 放 ， 以 及 每 次 复制 时 如 何 对 元 


新 的 复制 品 纵向 排列 ， 每 次 复制 时 改变 和 矩形 元 件 上 的 数字 


图 1-30 ”中 继 器 元 件 


(中 继 兹 ) (index) index 
0 100 


图 1-31 中 继 器 页 面 
中 继 器 还 可 以 存储 管理 数据 。 如 果 原 型 需要 输入 、 编 辑 数据 ， 则 可 以 用 中 继 器 来 实现 。 在 第 5 章 中 会 有 更 详细 的 介绍 。 
10. 表 单元 件 


Axure RP 把 一 些 常 见 的 网 页 中 用 于 输入 、 选 择 的 元 件 统 称 为 表单 元 件 ， 包 括 文 本 框 、 多 行文 本 框 、 下 拉 列 表 杠 、 列 表 框 、 复 选 框 、 单 选 按钮 和 提交 
按钮 。 这 些 元 件 在 画布 上 的 样子 如 图 1-32 所 示 。 


文本 框 下 拉 列 表 框 


多 行文 本 框 +“ 列表 框 


第 四 行文 本 


口 复 选 框 O 〇 单 选 按钮 


图 1-32 ”表单 元 件 
双击 文本 框 和 多 行文 本 框 可 以 直接 编写 内 容 。 


双击 下 拉 列 表 框 和 列表 框 ， 会 弹出 编辑 窗口 。 在 窗口 中 可 以 添加 列表 项 、 上 下 调整 列表 项 顺序 、 删 除 列 表 项 、 清 除 全 部 列表 项 。 还 可 以 一 次 添加 多 个 
列表 项 (如 图 1-33 所 示 ) ， 每 行 算 作 一 个 列表 项 。 


单 击 复 选 框 或 单 选 按钮 ， 则 选中 或 取消 选中 复 选 框 或 单 选 按钮 。 双 击 复 选 框 或 单 选 按钮 ， 可 以 编辑 文字 。 


Fr 一 


rp 编辑 列表 选项 


添加 和 组 织 列表 选项 。 勾 选 一 个 选项 作为 默认 选中 ， 
未 勾 选 则 默认 为 第 一 个 。 


RP 漆 加 多 个 


添 ) 输入 选项 值 < 每 行 一 个 > 


| 其 5X ”添加 多 个 


[| List ltem1 
[| List ltem2 


a ) 编辑 列表 项 b ) 添加 多 个 列表 项 


图 1-33 ”编辑 列表 框 
提示 : 


“提交 按钮 ”与 前 面 提 到 的 按钮 的 区 别 是 ， 提 交 按 钮 拥有 默认 Web 交 互 样式 ， 包 括 正 常 的 样式 、 光 标 悬 停 的 样式 、 和 鼠标 单 击 的 样式 等 ， 如 图 1-34 所 
示 。 而 前 面 提 到 的 按钮 只 是 类 似 算 形 的 元 件 ， 没 有 上 默认 的 样式 。 所 以 ， 提 交 按 钮 适用 于 Web 网 站 原型 ， 其 他 按钮 适用 于 APP 原 型 。 


= 和 鱼 = 图 “ ge 有 | 1 
| 是 回 -= 
I | 


a ) 正 第 b ) 光标 悬 停 c ) 鼠标 单 击 


图 1-34 提交 按钮 的 三 种 交互 样式 


单 选 按钮 可 以 设置 成 “组 ”。 例 如 ， 选 择 3 个 单 选 按钮 ， 如 图 1-35 所 示 ， 可 以 在 属性 栏 设 置 “ 组 ”名 称 。 原 型 中 同一 组 单 选 按钮 ， 在 同一 时 间 内 只 能 
有 一 个 处 于 选中 状态 。 


11. 表 格 元 件 


表格 元 件 在 画布 上 的 样子 如 图 1-36 所 示 。 


Wu Ej hadioButtons 


役 村 单 选 按 包 组 名 称 


eT 


图 1-35 ” 单 选 按钮 组 


图 1-36 ”表格 元 件 


表格 元 件 除 了 制作 表格 ， 还 可 以 用 来 做 列表 ， 如 图 1-37 所 示 。 


不 可 收 改 


图 1-37 用 表格 元 件 做 列表 原型 


12. 菜 单 类 元 件 


Axure RP 中 有 3 个 菜单 类 元 件 ， 分 别 是 树 状 菜单 、 水 平 菜单 和 素 直 菜单 。 


(1) 树 状 菜单 在 画布 上 的 样式 如 图 1-38 所 示 。 在 树 状 菜单 上 右 击 ， 在 弹出 的 快捷 菜单 中 可 以 添加 、 编 辑 树 状 菜单 上 的 节点 。 树 状 菜单 目 市 了 展开 、 
收 起 子 节点 的 交互 效果 。 如 果菜 单 层级 比较 多 ， 用 树 状 菜单 表示 会 更 清晰 。 


“ | tem 1 
lem 1.1 本 一 一 一 树 状 苹 单 
ltem 1.2 


= 
| F 

ta |t 

| | 


编辑 树 硅 


性 (E) 


添加 子 节点 (C) 添加 (A) 有 
上 方 添加 节点 (B) 移动 (M) 有 
下 方 添加 节点 (A) 删除 节点 (D) 


编辑 图 标 (|) 
交互 样式 .… 


图 1-38 树 状 菜单 元 件 


(2) 水 平 菜单 和 垂直 菜单 在 画布 上 的 样式 如 图 1-39 所 示 。 


水 平 菜单 


后 万 添加 菜单 项 (A) 
前 万 添加 菜单 项 (B) 
删除 菜单 项 (D) 


添加 子 菜单 (5) 
图 1-39 ”水平 菜单 和 垂直 菜单 


在 水 平 菜单 、 垂 直 菜 单 上 右 击 ， 在 弹出 的 快捷 荣 单 中 可 以 添加 、 编 辑 子 菜单 。 这 两 种 元 件 目 市 了 交互 效果 : 光标 悬 停 时 将 弹出 子 菜单 ， 光 标 移出 时 子 
菜单 将 隐藏 。 


提示 : 


水 平 菜单 和 垂直 菜单 适合 制作 层级 比较 简单 的 菜单 ， 使 用 时 可 以 根据 整体 页 面 布局 来 选择 水 平 样式 或 重 直 样式 。 


1.2.5 ”站 后 地 图 


站 点 地 图 可 以 管理 原型 中 所 有 页 面 的 层级 。 
新 建 原型 时 会 默认 添加 4 个 页 面 ， 如 图 1-40 所 示 。 图 1-40 中 可 以 看 到 顶层 有 一 个 iIndex 页 面 。index 页 面 下 有 3 个 子 页 面 page1、page2、page3。 
右 击 页 面 会 弹出 快捷 菜单 ， 通 过 快捷 菜单 命令 ， 可 以 添加 、 删 除 、 重 命名 页 面 ， 如 图 1-41 所 示 。 


双击 某 一 个 页 面 ， 束 可 以 在 画布 上 打开 这 个 负面， 进行 编辑 、 添 加 元 件 、 添 加 交互 等 操作 。 


图 1-40 ”新建 原型 的 站 点 地 图 


页 面 4] 后 | Q | index 


二 |] index 0 


添加 (A) 二 | 文件 夹 (F) Ctrl+Shift+Return 
移动 (M) 加 ”上 万 添加 页 面 (B) 


删除 (D) 下 下方 添加 页 面 (A) Ctrl+Return 


重合 名 (R) IE 于 页面 (| 
重复 (C) : 


图 表 类 型 (T) 


图 1-41 添加 、 编 辑 页 面 


如 图 1-42 是 一 个 实际 的 游戏 后 人 台 原 型 的 站 点 地 图 。 要 做 一 个 复杂 的 原型 ， 需 要 先 建 立 一 个 条 理 清晰 的 站 点 地 图 。 很 难 想象 如 果 没 有 站 点 地 图 ， 如 何 
管理 上 百 个 页 面 。 


而 匡 同 QQ 
中 登录 cn 
口 首页 
宠物 管理 ( 普通 4 门 充 物 管理 ( 普通 ) 
道具 管理 [| 宠物 管理 (定制) 
流 扮 管理 口 宠物 管理 (已 下 架 ) 
BOSS 管 理 用 站 宠物 详情 ( 普通) 
刷新 点 管理 口 技能 详情 
商 圈 管 理 门 添加 新 技能 
商户 管理 这 物 详情 (定制 ) 
相克 规则 添加 普通 宠物 
玩家 管理 > 和 
活动 管理 (未 开始 ) ; 口 
消息 管理 ， 门 BOSS 管 理 
礼包 管理 门 ”刷新 点 管理 
商城 管理 ( 简化 ) 》 门 ” 商 圈 管 理 
充值 管理 》 癌 商户 管理 
卡 券 管理 | [中 相克 规则 
iBeacon 管 理 ” [玩家 管理 
玩家 处 罚 审 批 bb 癌 活动 管理 ( 未 开始 ) 
增长 分 析 (增长 ) 》 癌 消息 管理 
消费 分 析 ( 消费 ) 》 丫 礼包 管理 
游戏 分 析 ( 玩家 ) [商城 管理 (简化 ) 


a ) 站 扣 地 图 b ) 站 扣 地 图 及 子 页 面 


图 1-42 ”一 个 游戏 后 台 的 站 点 地 图 
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1.2.6 和 母 版 


先 看 图 1-43 中 的 两 个 页 面 ， 可 以 友 现 两 个 页 面 的 导航 栏 是 相似 的 。 如 果 查 看 整个 原型 的 上 百 个 页 面 ， 可 以 友 现 每 个 页 面 的 导航 栏 都 是 相似 的 。 


宠物 列表 页 论 物 列表 


普通 完 物 定制 宠物 已 下 架 ce 普通 宠物 定制 宠物 已 下 架 


道具 管理 道具 管理 (GO 跳 跳 鼠 
装扮 管理 著 扮 管理 
BOSS 管 理 BOSS 管 理 宠物 居 性 
刷新 点 管理 刷新 点 管理 高 禾 名 称 
商 轿 管 理 
商户 管理 
相克 规则 


每 个 页 面 的 目录 部 分 都 相同 


图 1-43 不同 页 面 常 常 拥有 相同 的 一 些 元 件 


如 果 原 型 中 的 多 个 页 面 都 拥有 相同 的 模块 ， 那 么 最 好 将 这 个 模块 做 成 母 版 (如 图 1-44 所 示 ) 。 


图 1-44“ 母 版 


母 版 的 好 处 有 以 下 两 点 。 
(1) 快速 复制 : 母 版 可 以 像 元 件 一 样 直接 拖 忠 到 画布 上 。 


(2) 方便 维护 : 双击 母 版 即 可 修改 。 例 如 ， 导 航 栏 中 有 一 个 字 错 了 ， 没 用 母 版 忒 要 去 所 有 页 面 改 这 个 字 ， 如 果 用 了 和 母 版 ， 则 只 需要 在 母 版 中 修改 ， 
那么 引用 了 母 版 的 所 有 页 面 会 随 之 自动 更 新 。 


提示 : 


Axure RP 为 了 方便 区 分 母 版 和 其 他 元 件 ， 在 母 版 上 加 了 一 层 红 色 遮 单 。 如 果 感 觉 母 版 的 遮 单 颜色 有 干扰 ， 则 可 以 在 菜单 栏 中 选择 “视图 ” | 
章 ” 命 令 ， 勾 掉 母 版 的 遮 覃 。 


1.2.7 属性 


Axure RP 的 属性 设置 区 域 有 3 个 小 窗口 。 如 图 1-45 是 选中 一 个 矩形 元 件 时 ，3 个 窗口 的 状态 。 


. 属性 : 设置 元 件 的 动作 和 交互 。 第 4 章 会 详细 解释 Axure RP 中 交互 的 原理 ， 以 及 如 何 设置 交互 。 


说明: 如果 原 型 比较 复杂 ， 元 件 上 的 交互 较 多 ， 可 以 在 说 明 窗 口中 写 下 一 些 备注 信息 ， 以 防 几 个 月 后 再 打开 原型 时 不 记得 元 件 的 作用 了 。 


. 样式 : 设置 元 件 的 位 置 、 尺 寸 、 填 充 颜 色 、 阴 影 、 圆 角 、 字 体 等 视觉 方面 的 属性 。 
计 上 的 建议 和 规范 。 


( 短 形 各 现 ( 息 形 各 德 


属性 


Y 交互 


中 添加 用 例 em 创建 连接 


460 


鼠标 单 击 时 y 轴 坐标 


鼠标 移入 时 
鼠标 移出 时 


0 
文本 角度 


更 多 事件 >>> 


a ) 属性 窗口 b ) 说 明 窗 口 C ) 样式 窗口 


图 1-45” 属 性、 说 明和 样式 窗口 


1.2.8 ”元 件 地 图 


元 件 地 图 以 列表 形式 展示 页 面 上 的 所 有 元 件 。 如 图 1-46 中 可 以 看 到 页 面 上 的 矩形 、 占 位 待 、 动 态 面板 3 个 元 件 都 显示 在 右 侧 的 元 件 地 图 上 了 。 


单 击 元 件 地 图 右上 角 的 筛选 按钮 ， 在 弹出 的 菜单 中 可 以 选择 是 否 显 示 所 有 的 元 件 ， 如 图 1-47 所 示 。 


[| index 
一 ( 算 形 ) 
4 强 (动态 面 入) 
有 State1 


EE ( 占 位 符 ) 


图 1-46 ”元 件 地 图 


全 显示 可 见 和 不 可 见 元 件 
显示 可 见 元 件 


起 从 顶层 到 底层 排序 


图 1-47 元 件 地 图 的 过 滤 菜 单 
下 面 通过 实例 来 看 看 过 滤 的 效果 ， 如 图 1-48 所 示 。 图 1-48a 显 示 所 有 元 件 ， 图 1-48b 只 显示 动态 面板 。 
提示 : 


复杂 的 原型 会 使 用 多 个 动态 面板 ， 每 个 动态 面板 又 会 有 多 个 状态 ， 从 而 形成 一 个 复杂 的 层次 关系 。 用 元 件 地 图 可 以 更 方便 地 查看 这 种 层次 关系 。 


慨 要 : 页面 


概 归 : 见面 
[1 药 到 
4 坟 引 ll (动态 面板 ) 


Fr home 


口 药 到 
4 圭 all (动态 面板 ) 
到 home 
( 热 区 ) 
( 热 区 ) 


hospital 
order 
A (起 形 ) map 
(_) ( 炳 圆 形 ) 
A“( 起 形 ) 
[|_|] (矩形 ) 
(矩形 ) 
[| 虐 形 
ia 


a ) 显示 所 有 元 件 b ) 只 显示 动态 面板 


串 

pill 

里 。sanjin (动态 面板 ) 
A 人 0 


= 三 区 


图 1-48 元件 地 图 过 滤 后 的 效果 


1.2.9 友 布 原型 


在 画布 上 做 好 的 原型 ， 可 以 友 布 成 HTML 网 页 ， 让 其 他 人 看 到 。 


在 Axure RP 界面 右上 角 菜 单 下 面 的 区 域 ， 放 置 的 是 发 布 相关 的 按钮 ， 如 图 1-49 所 示 。 


单 击 “ 预 览 ”按钮 后 ，Axure RP 会 根据 原型 生成 一 个 临时 网 页 ， 并 通过 浏览 器 展示 该 原型 的 网 页 ， 如 图 1-50 所 示 。 


Axure RP 生成 的 网 页 中 左 侧 是 导航 栏 ， 对 应 Axure RP 原型 中 的 站 点 地 图 。 单 击 导航 栏 ， 可 以 切换 原型 中 的 不 同 页 面 。 网 页 中 右 侧 是 原型 ， 对 应 
Axure RP 原型 画布 上 的 所 有 元 件 。 


提示 : 


仔细 观察 图 1-50， 可 以 发 现 Axure RP 界面 与 网 页 并 不 完全 相同 。 这 是 因为 Axure RP 界 面 对 动 态 面 板 和 母 版 做 的 遮 罩 在 网 页 中 是 不 显示 的 。 另 外 ，Axute 
RP 中 设置 的 背景 、100% 宽 度 等 效果 只 有 在 网 页 中 才 会 显示 。 


共享 功能 与 预览 功能 类 似 ， 但 也 有 不 同 ， 主 要 表现 在 以 下 两 点 。 
预览 功能 生成 的 是 临时 网 页 ， 关 闭 Axure RP 后 网 页 就 失效 了 。 


. 共享 功能 生成 的 是 长 期 网 页 ， 上 传 到 Axure 官 方 平台 的 服务 器 上 ， 生 成 一 段 长 期 有 效 的 网 址 。 
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了 网 由 


b ) 在 训 葛 器 中 预 砚 效果 
图 1-50 原型 的 预览 效果 
(1) 要 使 用 共享 功能 ， 需 要 有 一 个 Axure RP 账 号 。 单 击 “ 登 录 ” 按 钮 ， 弹 出 如 图 1-51 所 示 对 话 框 。 
(2) 注册 并 登录 Axure RP 账 号 之 后 ，Axure RP 界面 会 变 成 登录 状态 ， 如 图 1-52 所 示 。 
(3) 登录 后 单 击 “ 共 享 ”按钮 ， 弹 出 对 话 框 ， 如 图 1-53 所 示 。 


图 1-53 标 题 栏 中 的 Axure share 融 是 Axure 官 方 的 原型 友 布 平台 。 在 Axure share 上 可 以 保存 原型 文件 ， 还 可 以 生成 原型 网 址 。 


在 图 1-53 中 还 可 以 配置 生成 网 页 的 方式 ， 通 党 使 用 默认 设置 即 可 。 在 第 9 草 会 详细 解释 这 里 的 配置 选项 ， 以 及 如 何 配 置 才能 在 手机 上 达到 最 佳 显示 效 
果 。 


、 


次 其 好 


小 
| 
VY 


一 个 原型 时 ， 选 择 第 一 项 “创建 一 个 新 项 目 ”。 一 个 原型 文件 就 是 一 个 项 目 。 如 果 原 型 涉 密 ， 还 可 以 设置 访问 密码 。 


. 第 二 次 共享 原型 时 ， 默 认 选 择 第 二 项 “替换 现 有 项 目 ”。 项 目 ID 是 Axure Share 平 台 分 配给 每 个 项 目的 唯一 ID。 一 般 这 个 ID 就 是 原型 网 址 的 前 组 


Xo 


Log in to publish and host files with Axure Share. Share prototypes with 


your team and with clilents. Co-author protoypes and specifications (Team 
and Enteprise Editions only). 


jituoshiti@live.cn 


图 1-51 注册 Axure RP 账号 


图 1-52 ”登录 Axure RP 账号 


sp 点 布 到 Axure Share 


用 
配置 网 页 样式 配置 HTML 1 (default) 


创建 项 目 @) 创建 一 个 新 项 目 
名 称 。 | 大师 模板 
密码 ”| 【《 论 草 ) 
文件 夹 ( 读 盘 ) 


昔 换 项 目 〇 著 换 现 有 项 目 
项 目 ID 


图 1-53 发布 到 Axute Share 上 


(4) 发 布 过 程 如 图 1-54 所 示 。 原 型 文件 会 上 传 到 Axure Share 平 台 。 


国 二 日 


生 布 到 AXUTE Share 


您 可 以 继续 使 用 Axure RP 发 布 ， 


RP 交 件 正 企 上 传 : 1536/14032 kb 


图 1-54 上传 原 型 


(5) 发 布 成 功 后 如 图 1-55 所 示 。 窗 口中 的 链接 就 是 Axure Share 生 成 的 原型 网 址 。 在 浏览 器 中 直接 打开 即 可 查看 原型 。 


Er Ta sr ES ed 
Hs 而 各 | “0 i Ws | 
AANUTE sniafe 


您 的 Axure Share 原 型 页 面 链接 为 : 


http:Wivahco .axshare.com 


[| 不 加 载 工 具 枉 


您 可 以 继续 使 用 Axure RP 发 布 ， 


发 布 成 功 | 


图 1-55 ”发 布 成 功 
实际 工作 中 ， 如 果 不 方便 面对面 给 同事 演示 原型 ， 可 以 将 原型 网 址 发 给 同事 查看 。 
3. 上 友 布 


单 击 “ 友 布 “ 按 钮 后 会 弹出 如 图 1-56 所 示 的 菜单 。 


预 兄 
预 点 选项 ….( 口 ) 
在 和 布下 AxSshare...(A) 


生成 HTML 文 件 ..(H) 
在 HTML 文 件 中 重新 生成 当前 页 面 (R) 


生成 Word 说 明 书 ...(G) 
更 多 生成 器 和 配置 义 件 ( MM) 


F5 
Ctrl+F5 
F6 


F8 
Ctrl+F8 


图 1-56 发 布 菜单 


. 预览 选项 : 与 共享 时 的 配置 网 页 样式 一 样 。 
` 发 布 到 AxShare: 就 是 之 前 介绍 的 “共享 ”功能 。 
- 生成 HTML 文件 : 会 在 本 地 生成 HTML 文件 。 可 以 调整 本 地 存储 地 址 ， 如 图 1-57 中 标注 框 所 示 。HTML 文 件 可 以 直接 打包 分 享 给 同事 查看 。 


- 在 HTML 文 件 中 重新 生成 当前 页 面 : 含义 如 字面 所 述 。 当 原型 页 面 很 多 时 ， 每 次 生成 整个 原型 的 HTML 文 件 都 要 几 分 钟 或 十 几 分 钟 。 如 果 只 修改 了 
一 个 页 面 ， 重 新 生成 整个 原型 的 HTMIL 文 件 显然 不 合算 。 用 这 个 选项 可 以 只 更 新 一 个 页 面 ， 几 乎 瞬间 完成 。 相 比 “ 生 成 HTMIL 文 件 ” 功 能 ， 它 可 以 提高 生 
成 的 效率 。 


" 生成 Word 说 明 书 : 可 以 生成 Word 文 档 。 看 起 来 很 方便 的 功能 ， 但 如 果 没 有 给 每 个 元 件 做 好 命名 和 备注 ，Word 文 档 几 乎 没 法 看 明白 。 实 际 工作 中 也 
很 少 有 人 用 这 个 功能 。 

` 更 多 生成 器 和 配置 文件 : 可 以 配置 Word 文 档 、CSV 文 档 、 打 印 的 样式 。 属 于 与 生成 文档 配套 的 配置 功能 ， 同 样 比较 “鸡肋 。 

提 不 : 


UA oC 


Chrome 浏 览 器 和 用 了 Chrome 内 核 的 浏览 器 无 法 直接 打开 Axure RP 生 成 的 HTML 文件 。 浏 览 器 会 给 出 提示 ， 如 图 1-58 所 示 。 


这 个 页 面 提示 了 “如 何 打 开 Axure RP 网 页 ”的 方法 ， 可 以 依照 提示 下 载 相应 插件 ， 解 决 这 个 问题 。 


如 果 读 者 觉得 下 载 安装 插件 的 过 程 比较 麻烦 ， 笔 者 推荐 使 用 微软 的 Edge 浏 览 器 ， 可 以 直接 打开 Axure RP 网 页 。 


页 面 说 明 
元 件 说 明 


Web 字 体 
字体 腺 射 
移动 设备 


讨论 


np 生成 HTWML<HTRML 十 > 


常规 


存放 HTML 艾 件 的 目标 艾 件 实 : 


CUsersyjinniDocumentsAxwuraiHTML' 大 陋 模板 


图 1-57 ”生成 HTML 


工具 栏 

而 | 开启 页 面 列表 
门 ) 关闭 页 面 列 要 
站 最小 化 工具 栏 
门 不 加 载 工 具 栏 


CUTe 


AXURE RP EXTENSION 
For Chrome 


oogle Chrome requines arl extenelon 10.vew ocalhy stored prolects. ANematively. upload your RP fle to AxShare or Use a darent browser 


YIEWLOGAL PROJECTS IN GHROME 


1. Install Extensisn from Chrome Store 


2 Open the Extensions Options 


四 | 喇 下 点 iLL 全 站 TE 生 必 ON 


3. Check Allow access to flle URLs" a. Check the button below 
亲 hxure RP Extensior for Chrome 0G.&i IEW IN CHRONE 


hl Im levagnit sf Alilire Becets Eo Tite URLS 


图 1-58 浏览 器 的 提示 


1.3 ”案例 1: 我 的 第 1 个 Axure RP 原型 


页 面 


前 面 已 经 介绍 完了 Axure RP 最 基础 的 概念 和 功能 


， 下 面 该 动手 实践 了 。 本 节 将 带领 读者 学 习 做 一 
来 ， 加 强 对 Axure RP 的 理解 。 


个 简单 的 “注册 页 面 ”， 把 之 前 讲 过 的 概念 串 起 


1.3.1 创建 原型 文件 


打开 Axure RP 软件 ， 在 弹出 的 对 话 框 中 单 击 “ 新 建文 件 ”按钮 ， 然 后 在 菜单 栏 中 单 击 “保存 文件 ”按钮 ， 如 图 1-59 所 示 。 最 后 ， 选 择 原型 文件 的 保 
存 地 址 。 


rr 名 Axuyre RP 引 团队 去 


axXUreUser 已 近 权 


并 网 过 全 


ve RP 8 


站 page1 
口 page2 
门 page3 


1.3.2 ”添加 元 件 


团队 版 
8.0.0.3303 


团队 中， 账户 (C) 帮助 (H) 


Ee a 编辑 ( 视 区 (V) 项 目 (P) 布局 (A) 发 布 们 \ 
怕人 保存 文件 一 pe8 


CODIT 二 全: 4 


100% ~ 


WELCOME TO AXURE RP 


Ca ) 


二] 开 文 件 


第 一 案 - 注 册 .rp > 

大 师 模板 .rp > 

游 积 .rp > 

后 台 . 忠 > 

药 到 1107.mp > 

选举 yote rp > 

灯塔 之 域 后 台 看 型 0206.rp 
36kKr PP > 


更 多 资源 : 


Licensed {10 axUreuUser 


Axure 论坛 > > 
AxuUrs 博客 > > 
AxUre 支持 > > 


图 1-59 ”新 建 Axure RP 文件 


四 Os jitwoshiti 
x 了 


创建 好 原型 文件 之 后 ， 束 可 以 开始 制作 原型 了 。 首 先 介 绍 如 何在 画布 上 添加 各 种 元 件 、 移 动 元 件 的 位 置 ， 以 及 编辑 元 件 文字 。 


(1) 从 元 件 库 中 拖 外 矩形、 文字 、 按 钮 、 复 选 框 等 元 件 到 画布 上 ， 如 图 1-60 所 示 。 


np 第 一 窜 -- 注 册 - Axure RP 8 团队 版 ;axureyser 已 授权 


立 件 上 F) 编辑 (E) 视图 (WW 项 目 (P) 布 周 [A) 发布 们 
铅 和 接 梢 

Dp -HE | 间 间 十 

文件 


Detatt wl | 三 PTE “ Nera 


mm A 
到 [ index 

DD pagel 

| page2 

| page3 


< 中 加 莹 竺 : Wwwiaxure.sem 提 供 > 版 本 ; V1,34 


团队 (TT) 账户 {C) 帮助 (H) 


ry 生硬 量 65% 


草 贴 松 LL 洲 择 二 连 隘 钢笔” 更 区 


雇 襄 


| 


图 1-60 拖 旭 元 件 


| 
对 齐 ? 


ll ,BO 
广 布 


预览 ”。 共享 ”内 布 " 


ce 


| Default 
页 面 排列 
蔡 时 颜色 


背景 图 片 


新 建文 件 


态 jituoshiti 


(2) 选中 元 件 ， 拖 钨 元 件 边缘 改变 其 形状 大 小 ， 然 后 拖 蝶 左上 和 角 的 小 三 角 调 整 圆 角 大 小 。 调 整 好 后 ， 双 击 元 件 可 以 编辑 文字 。 在 功能 区 改变 边缘 线 


颜色 、 填 充 颜色 和 字体 颜色 ， 如 图 1-61 所 示 。 


sp 弟 一 案 -- 注 册 - Axure RP 8 国 队 版 ;axureuser 已 授权 ”=< 中药 支 持 : www.iaxure.com 提 人 殿 > 版 本 : 
亦 件 (F) 编辑 {E) 视图 (VW) 项 目 (P) 布 周 [A) 发 布 们 国 队 (T) 账户 (C) 帮助 (H) 


Dema>a | 而 四 了 上 | 本 
文件 编 放 


茧 贴 板 LL 选择 -小 连接 钢笔 更 守 " 


Box 1 -| By arial 四 | Normal | 


把 蝶 小 三 角 调 整 圆 角 


抱 电 边 绿 改变 大 小 


图 1-61 调整 样式 


(3) 从 本 书 附 审 的 模板 中 找到 小 图 标 ， 复 制 并 粘贴 到 原型 中 。 将 原型 调整 到 如 图 1-62 所 示 的 样子 。 


注册 新 账号 


加 我 同意 隐私 协议 和 服务 声明 


复制 、 粘 贴图 标 复制 、 粘 由 图 片 


图 1-02 ”贴图 


1.3.3 ”设置 页 面 样式 


不 选择 任何 元 件 ， 属 性 栏 会 显示 整个 页 面 的 属性 ， 按 图 1-63 所 示 设 置 页 面 样式 。 
` 页 面 排列 : 选择 页 面 居 中 。 


背景 闫 色 : 设 为 灰色 。 


上 版 : axUreusar 已 沟 概 < 中 文 支持 : Www.iaxwure.com 提 供 > 版 本 : W1:34 


布局 局) 发布 内 团队 信 账户 (Ct) 帮助 iH) 


1.3.4 ” 预 史 原型 区 


| 四 yy 四 + 昌 jituoshiti * 
分 布 " 也 上 


其 豆 。 涛 布 " 


| Default” 
页 面 振 列 
背景 颜色 


背景 图 片 导入 


| 癌 | 回 i 加 | 


图 1-63 ”页 面 样式 


单 击 “预知 ”按钮 ， 在 浏览 器 中 查看 的 原型 效果 如 图 1-64 所 示 。 


六 守 


tO Etar 


注册 新 账号 


图 1-64 注册 页 面 


以 上 就 是 制作 一 个 简单 原型 的 完整 流程 。 


第 2 草 ”样式 设置 


本 章 主 要 讲解 如 何 设置 原型 中 各 种 元 件 的 样式 。 调 整 颜色 、 文 字 格 式 等 视觉 元 素 是 UI 设 计 师 的 专业 工作 。 产 品 经 理 不 需要 在 排版 、 样 式 上 花费 过 多 
的 心思 ， 但 产品 经 理应 该 学 会 如 何 通过 设置 不 同 的 样式 ， 来 表达 页 面 的 主 次 和 功能 的 优先 级 。 


BD 
到 
中 


第 1 草 中 介绍 了 如 何 设置 图 形 的 填充 颜色 、 边 缘 线 的 颜色 和 文字 的 颜色 。 本 节 将 介绍 颜色 菜单 界面 。 


2.1.1 ”认识 颜色 窗口 


单 击 各 个 颜色 按钮 旁边 的 下 三 角 按 钮 ， 会 弹出 颜色 窗口 ， 如 图 2-1 所 示 。 


加 关 小 惩 纳 
DD 它 国情 再 做 网 a 作 一 中 > De a jituoshiti ~ 
文件 消 组 人 分 布 " 共享 


ye L 选择 小 连接 ” 钢 秆 ”更 多 ” 缩放 


Box 1 v By Aral ~ Normal 十 13 = 


页 面 + [HQ index 


填充 类 型 : | 单 色 

取 色 器 > # | FFFFFF 设 为 没有 颜色 ， 完 全 透明 

色 值 
闻 

色 盘 
口 
鸭 
= 
加 男 轩 于 二 国 面 画 于 国 加 
周 国 国 国 有 ” 国 面 国 本 面 国 一 
国 面 面 而 国 中 硬 面 而 刷 国 而 丽 刷 口 
回国 国 国 国 加 加 加 

历史 记录 FH 最 近 的 页 面 


图 2-1 颜色 窗口 
在 颜色 窗口 中 ， 可 以 通过 多 种 方式 设置 颜色 : 


" 直接 单 击 色 一 选择 颜色 。 


“ 单 击 历史 记录 里 的 颜色 选择 颜色 。 
` 输入 色 值 设置 颜色 。 
` 通过 取 色 器 ， 获 取 其 他 图 片 、 元 件 上 的 颜色 。 


下 面 介绍 更 多 高 级 样式 的 设置 方法 。 


2.1.2 ”设置 透明 效果 


颜色 窗口 中 有 一 个 “不 透明 ”选项 ， 是 用 来 设置 透明 效果 的 ， 如 图 2-2 所 示 。 不 透明 度 是 指 元 件 填 充 颜色 的 不 透明 程度 。 不 透明 度 为 0 时 ， 则 元 件 完 
全 透明 。 


填充 类 型 :| 单 色 


| ] 性 # FFFFFF LA 


上 


[| 
国 
思 
加 
辽 
加 
转 


ee | 
国 国 加 本 硬 硬 司 国 
加 醒 醒 硬 国 硬 同 国 E 


全 | 口 口 抽 网 面 


最 近 的 负面 
回国 ”加 国 
| 


| 加 
国 醒 天 本 国 。 国 硬 站 | 


图 2-2 ”设置 不 透明 度 


透明 效果 有 很 多 用 处 。 例 如 ， 和 希望 在 复杂 的 背景 图 片上 写字 ， 则 可 以 在 图 片上 添加 一 个 黑色 起 形 ， 将 不 透明 度 设 为 70。 加 上 这 层 矩 形 透 明 遮 纪 ， 可 
以 让 图 片上 的 文字 更 易 阅 读 ， 如 图 2-3 所 示 。 


及 年 了 
透明 效果 


图 2-3 ”透明 遮 音 


2.1.3 设置 渐变 效果 


图 形 和 边 绿 线 可 以 设置 两 种 填充 类 型 ， 即 音色 和 渐变 ， 可 以 在 下 拉 荣 单 中 选择 其 中 一 种 填充 类 型 。 设 置 渐变 的 窗口 如 图 2-4 所 示 。 


pp # FFFFFF Fa 
本 轿 加 回国 本 加 昌国 


加 图 国 国 口 由 国 面 面 


L 


四 


最 近 的 页 面 


图 2-4 渐变 窗口 


选中 渐变 范围 上 红 圈 中 的 小 光标 ， 可 以 在 色 盘 中 改变 渐变 颜色 、 调 整 不 透明 度 。 


1. 设 置 两 个 色 值 的 渐变 


区 


例如 图 2-5 中 ，a 图 顶部 有 一 个 透明 渐变 效果 ， 加 强 了 文字 的 可 辨识 度 ， 同 时 在 文字 与 图 片 间 也 形成 了 自然 的 过 度 。 这 个 效果 就 是 用 渐变 做 的 ， 渐 变 
色 值 从 46% 的 黑色 到 0% 的 黑色 。 


February 21 


saturday morning | Intl, 


国 枚 本 加 国 国 加 
不 透明 : 46 UV 


最 近 的 选择 最 近 的 页 面 


ee | || 
国力 故国 下 古国 二 国 下 加 加 


a ) 透明 渐变 效果 b ) 渐变 设置 
图 2-5 ”透明 渐变 效果 


2. 设 置 多 个 色 值 的 渐变 


如 图 2-6a 所 示 为 一 个 运动 类 APP 的 原型 。 页 面 地 图 上 显示 用 户 的 跑步 轨迹 ， 绿 色 为 快速 ， 黄 色 为 中 速 ， 红 色 为 慢 速 。 一 根 线 上 需要 3 种 颜色 ， 这 种 情 
况 就 需要 设置 多 个 色 值 的 渐变 。 设 置 多 个 色 值 的 渐变 的 方法 如 下 : 


(1) 在 两 个 小 光标 之 间 单 击 ， 可 以 添加 一 个 小 光标 。 
(2) 左右 拖 蝶 小 光标 可 以 改变 每 个 渐变 色 值 所 占 的 范围 。 


(3) 将 小 光标 移 到 另 一 个 小 光标 上 可 以 删除 小 光标 。 


填充 类 型 : | 渐变 | 
"0 


国 多 # ooFF33 | 园 | 到 多 


本 古本 醒 国 而 置 国 上 
不 透明 100 中 (| 
最 近 的 选择 最 近 的 页 面 


| -| 


a ) 多 色 渐 变 效果 b ) 多 色 渐 变 设 


图 2-6 ”多 色 渐 变 


2.2 阴影 


Axure RP 可 以 设置 阴影 效果 。 例 如 图 2-7 中 的 矩形 就 有 一 个 偏 移 到 右 下 侧 的 阴影 。 这 个 阴影 效果 的 属性 如 下 。 
" Axure RP 中 阴影 的 大 小 一 般 与 元 件 的 大 小 一 致 。 
阴影 的 偏 移 量 是 x 为 5，y 为 5。 含 义 是 阴影 左上 角 的 坐标 比 矩 形 左 上 角 的 坐标 x 轴 多 5 个 像素 ，y 轴 多 5 个 像素 。 


-阴影 的 模糊 度 是 5。 模 糊 度 越 大 ， 阴 影 的 边缘 越 模糊 。 想 象 一 下 ， 阴 影 的 模糊 程度 就 像 墨汁 滴 在 水 里 的 散 开 程度 。 模 糊 度 越 大 ， 墨 汁 散 开 范 围 越 
， > 坚 色 越 淡 。 


` 阴影 的 颜色 是 透明 的 黑色 。 


Index 
bb . 


阴影 按 乌 


图 2-7 设置 阴影 


原型 中 ， 阴 影 常 用 来 增加 立体 效果 ， 表 示 强 调 ， 如 图 2-8 所 示 。 


Lorernm Ipsur dolor st amet consectetur 
adipiscing ellt. Aenean euismogd bibaendum 
laoreat. 


图 2-8 ”阴影 案例 


2.3 ”文字 格式 


图 形 元 件 上 的 文字 格式 设置 和 纯 文字 格式 设置 的 方式 是 相同 的 。 如 图 2-9 所 示 为 图 形 元 件 上 的 文字 设置 格式 。 


. 加 文字 的 样式 为 “文本 段落 ”。 


. 字体 为 Arial Normal。 


则 文字 没有 加 粗 ， 没 有 斜体 ， 没 有 下 画 线 。 
` (D) 文 字 字 色 为 黑色 。 
(6) 没 有 项 目 符号 


OO 文字 对 齐 方式 为 左 对 齐 和 上 对 齐 


中 


文本 段 洲 vi By Arial 
4+| 位 | Q | index 


A [| index 0 100 

站 page1 Torem ipsu m dolor sit amét. consectetur adipiscin 

| page2 elit. Aenean euismod bibendum laoreet. Proin 

时 gravida dolor sit amet lacus accumsan et viverra 
usto commodo. Proin sodales pulvinar tempor. Cu 
soclls natogque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Nam fermentum， 
nulla luctus pharetra vulputate, felis tellus mollis ou 


图 2-9 ”图形 元 件 上 的 文字 格式 


2.3.1 ”文字 样式 


单 击 图 2-9 中 处 的 文字 样式 ， 会 弹出 下 拉 列 表 框 ， 如 图 2-10 左 图 所 示 。 图 2-10 右 图 中 展示 的 是 几 种 Axure RP 默认 的 文本 样式 ， 选 择 其 中 一 项 可 以 
直接 改变 文字 的 整体 样式 。 


例如 ， 图 2-10 中 ， 是 同一 段 文 字 在 Box1、 一 级 标题 、 文 本 段落 3 种 样式 下 的 显示 效果 。 用 尸 还 可 以 自己 创建 新 的 样式 。 


区 本 有 段 范 Lorem jpsum dolor sit amet, consectetur adipiscing 
elit. 
Default 


Box 1 
mage Lorem ipsum dolor 
一 级 标题 一 a 

sit amet, 


二 级 标题 


三 级 标题 consectetur 
i adipiscing elit. 


五 级 标题 


六 级 标题 
Lorem iIpsum dolor sit amet, consectetur adipiscing 


义 本 段落 “elit. 


图 2-10 ”文字 样式 
提示 : 


在 Axure RP 中 ,文字 元 件 和 和 佐 形 元 件 之 间 可 以 相互 转换 。 


2.3.2 ”调整 文本 的 间距 和 填充 


在 样式 设置 窗口 中 ， 还 可 以 对 文字 设置 行 间 距 和 填充 效果 。 行 间距 代表 每 行文 字 之 间 的 距离 ， 填 充 表示 元 件 边缘 与 文字 的 距离 ， 如 图 2-11 所 示 。 


图 2-11 文字 样式 设置 
如 图 2-12 所 示 为 设置 行 间距 前 后 文本 段落 的 显示 效果 对 比 。 文 本 较 多 的 原型 建议 适当 增 大 行 间距 ， 以 提高 阅读 效率 和 舒适 度 。 
填充 是 指 图 形 内 的 文本 距离 图 形 边缘 的 边 距 。 如 图 2-13 所 示 为 设置 了 填充 上 下 左右 都 是 22 的 文本 。 


Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing 
lit. Aenean euismod bibendum laoreet. Proin A A ER 
gravida dolor sit amet lacus accumsan et viverra 
lusto commodo. Proin sodales pulvinar tempor. Cum 
soclls natoque penatibus et magnis dis parturient 


gravida dolor sit amet lacus accumsan et viverra 
justo commodo. Proin sodales pulvinar tempor Cum 


montes, nascetur ridiculus mus. Nam fermentum,. sociis natoque penatibus et magnis dis parturient 


nulla luctus pharetra vulputate. felis tellus mollis orci, montes. nascetur ridiculus mus. Nam fermentum. 
sed rhoncus sapien nunc eget. 


nulla luctus pharetra vulputate, felis tellus mollis orcl， 
sed rhoncus sapien nunc eget. 


行 间 虐 -yr 行 间距 20 ~ 


图 2-12 ” 行 间 距 效 果 对 比 


$e 
Lorem Ipsum dolor sit amet consectetur 
adipiscing elt Aenean eulsmod bibendum 
laoreet. Proin gravida dolor sit amet lacus 
22 accumsan et viverra justo commodo. Proin 


sodales pulvinartempor Lum soclls natogque 
penatibus et magnis dis partunent montes， 
nascetur ridiculus mus. Nam fermentum. nulla 22 
luctus pharetra vulputate, telis tellus mollis orci,<—» 
sed rhoncus saplien Nunc Ys 
- 


图 2-13 ”填充 效果 


2.3.3 ”调整 文本 的 咒 度 、 高 度 


选中 文本 元 件 时 可 以 看 到 选中 框 上 的 感 ， 有 日 色 、 黄 色 ， 如 图 2-14 所 示 。 黄 色 的 点 表示 这 个 方向 可 以 自动 调整 宽度 。 日 色 的 点 表示 这 个 方向 已 固定 
高 度 。 图 2-14 中 左 、 右 点 是 日 色 的 ， 表 示 文 字 的 横向 宽度 是 固定 的 ， 文 字 长 度 大 于 该 宽度 时 自动 换行 。 


EE 
Torem IPSum dolor s 


双击 可 以 切换 日 点 / 黄 点 。 将 图 2-14 中 的 点 切换 成 黄 点 ， 如 图 2-15 所 示 。 文 字 企 横向 宽度 是 不 固定 的 ， 文 字 不 会 自动 换行 ， 而 是 一 直 向 右 扩 展 。 


dorem ipsum dolor Sit amet, consectetur adipBcing elit: Aenean euismod bibendum aoree 则 


图 2-15 ”自由 填充 


在 样式 设置 窗口 中 也 可 以 设置 文本 横向 、 纵 向 宽度 是 否 固定 ， 如 图 2-16 所 示 。 


(起 形 生动 | 


2.4 格式 刷 


Axure RP 支持 把 一 个 元 件 的 颜色 、 阴 影 、 文 字 格 式 、 透 明度 等 样式 复制 到 另 一 个 元 件 上 。 操 作 方 法 如 下 。 
(1) 在 功能 区 单 击 “ 更 多 ”按钮 ， 弹 出 “更 多 ”菜单 。 
(2) 在 “更 多 ”菜单 中 ， 选 择 “ 格 式 刷 ”命令 ， 弹 出 “格式 刷 ” 对 话 框 ， 如 图 2-17 所 示 。 


(3) “格式 刷 ” 对 话 框 中 显示 了 当前 选中 元 件 的 样式 信息 。 


(4) 选中 另 一 个 元 件 ， 然 后 单 击 “ 格 式 刷 ”对 话 框 中 的 “应 用 ”按钮 ， 第 二 个 元 件 就 会 变 成 与 第 一 个 按钮 相同 的 样式 。 
提示 : 


打开 “格式 刷 ” 对 话 框 时 ， 会 默认 复制 当前 选中 的 元 件 样 式 。 如 果 希 望 复制 其 他 元 件 的 样式 ， 则 在 打开 “格式 刷 ” 对 话 框 后 ， 选 中 其 他 元 件 后 ， 单 
击 “ 复 制 ” 按 钮 。 


元气 
加 | 应 用 全 部 


图] 元 件 样式 

图 字体 

字体 类 型 

字体 尺寸 

租 体 [点 击 切 换 为 粗 体 ) 
图 兰 体 “| (点 击 切换 为 斜体 ) 
下 划 绪 [点 击 切换 为 下 划 线 ) 
图 | 字体 颜色 = 


项 目 (P) 布局 (A) 点 布 山 ”团队 (T) 账户 (C) 帮助 (H 


吕 从 9 100% = 


篇 放 


Brrml i 
- 由 时 a (Ct 


切 到 {Cifl+6) 区 | 线段 是 色 和 


边框 可 见 性 


a {Gtr+7) 


rr 了 1 
广 接 点 (Ctrh8) 


lV 贺 角 半径 


格式 剧 {Ctnl+5) 


圆 角 可 见 性 
名 | 填充 颜色 
| 不 透明 (部) 


复制 从 选中 的 元 件 复制 样式 。 
应 用 应 用 选中 的 样式 到 月 标 元 件 。 


图 2-17 格式 刷 的 使 用 
例如 ， 图 2-18 中 有 两 个 按钮 ,分别 是 “购买 ”按钮 和 “使 用 ”按钮 。 如 希望 将 “使 用 ”按钮 改 为 与 “购买 ”按钮 相同 的 样式 ， 则 如 下 操作 即 可 。 
(1) 选中 “购买 ”按钮 。 
(2) 单 击 “ 格 式 刷 ”按钮 ， 弹 出 “格式 刷 ” 对 话 框 ， 如 图 2-18a 所 示 。 
(3) 选中 “使 用 ”按钮 。 
(4) 单 击 “ 格 式 刷 ”对 话 框 中 的 “应 用 ”按钮 ， 如 图 2-18b 所 示 。 


这 样 ，“ 使 用 ”按钮 的 填充 色 、 圆 角 、 字 色 等 样式 都 与 “购买 ”按钮 一 样 了 。 


(点 击 切换 为 粗 体 ) | 区 日 | (点 击 切换 为 粗 体 ) 
(点 击 切换 为 矢 体 ) | 让 区 让 (点击 切换 为 斜体 ) 
{ 点 击 切换 为 下 划 线 ) 闭 下 多 由 | (点 击 切换 为 下 划 线 ) 


有 | EF - 和 


= pe 


前 边框 可 见 性 
前 网 名 半生 


| 贺 角 可 见 性 ] 贱 | 图 角 可 见 性 


总 | 填 讽 颜色 双 十 广 颜 色 


| 不 过 了 明 [%%) IY 不 选 明 (的 


复制 | 从 这 中 的 元 性 饼 倒 样式 。 复制 从 选 牛 的 元 特 复 捉 样 式 。 


应 用 应 用 选中 的 样式 到 月 标 元 件 ， 应 后 上 应 用 进 中 的 样式 到 娃 标 元 忻 。 


a) 从 购买 按钮 复制 样式 b ) 将 样式 应 用 到 “使 用 ”按钮 


图 2-18 复制 按钮 样式 


2.9 “钢笔 ”和 目 定 义 图 形 


本 节 介 绍 如 何 使 用 “钢笔 ”功能 绘制 任意 形状 的 图 形 ， 以 及 使 用 自 定义 图 形 功能 任意 修改 图 形 的 形状 。 


2.5.1 钢笔 


Axure RP 中 文 持 通过 “钢笔 ”功能 画 出 自 定 义 形状 的 图 形 。 
例如 ， 用 “钢笔 ” 画 一 个 对 号 ， 步 骤 如 下 。 


(1) 单 击 “钢笔 ” 按钮 ， 如 图 2-19 所 示 。 


图 2-19 “钢笔 ”按钮 


(2) 在 画布 上 依次 画 出 对 号 的 起 点 、 拐 点 和 终点 ， 然 后 按 Enter 键 确认 ， 如 图 2-20 所 示 。 


Index > 


mr | Tr I : = = 


图 2-20 “” 画 对 号 


自 定义 图 形 的 操作 如 下 。 


(1) 拖 外 图 2-20 中 的 3 个 点 ， 可 以 微调 “对 号 ”的 形状 。 
(2) 双击 图 2-20 中 的 3 个 点 ， 可 以 切换 该 点 连 线 的 曲直 度 。 如 图 2-21 是 双击 对 号 中 间 拐 点 后 的 效果 。 图 2-21b 是 选中 状态 ， 调 节 黄 色 小 方块 可 以 调 
节 曲 线 守 曲 程度 。 


index > I index > 


a ) 直线 改 为 曲线 b ) 选中 曲线 Cc ) 调整 曲线 


图 2-21 自 定 义 曲线 


(3) 单 击 画布 空白 区 域 ， 则 取消 选择 。 
(4) 单 击 “ 对 号 ”的 线条 部 分 ， 会 进入 “钢笔 ”模式 ， 可 以 添加 、 调 整 点 。 


如 图 2-22 所 示 为 一 个 后 台 的 原型 ， 其 中 列表 的 选中 框 束 是 用 “钢笔 ”功能 画 出 来 的 。 


@® jituo 


的 := 


Be 
rs 
开心 消 消 乐 98222562 


“钢笔” 画 出 的 


图 2-22 ”选中 框 


2.5.2” 目 定义 形状 


图 形 元 件 可 以 通过 添加 、 调 整 图 形 的 “点 ”， 变 成 任意 形状 。 下 面 介 绍 如 何 利用 圆 形 元 件 画 一 个 气泡 形状 。 


(1) 单 击 右上 角 的 小 圆 点 ， 弹 出 改变 图 形 菜单 ， 如 图 2-23 所 示 。 


册 蛙 击 小 圆 点 


呈现 DSF E77 
人 人 归口 中 己 
== 


DoODBILIAA 
GD 日 一 | 


转换 为 目 定义 形状 < 包 早 击 按钮 


图 2-23 ”转换 为 自 定 义 形 状 


(2) 单 击 “ 转 换 为 自 定义 形状 ”按钮 ， 即 可 像 “钢笔 ”功能 一 样 添加 、 调 整 图 形 上 的 点 。 


(3) 单 击 圆 形 曲线 的 左下 段 ， 添 加 3 个 点 ， 拖 忠 中 间 点 画 出 气泡 形状 ， 如 图 2-24 所 示 。 


| 
| 
1 
| 
| 
| 
| 
| 


a ) 圆 形 


c ) 拖 中 中间 的 点 


2.6 ”处 理 图 片 的 尺寸 


制作 原型 时 需要 收集 很 多 图 片 素 材 。 当 素材 尺寸 不 符合 要 求 时 就 要 适当 裁剪 。 


右 击 图 片 ， 在 弹出 的 快捷 菜单 中 可 以 看 到 有 两 个 与 裁剪 相关 的 功能 ， 即 分 割 图 片 和 裁 吝 图 片 ， 如 图 2-25 所 示 。 


图 2-25 ”图 片 编辑 菜单 


2.6.1 ”分割 图 片 


选择 “分 割 图 片 ” 命 令 后 ， 界 面 会 显示 出 分 割 辅 助 线 。 辅 助 线 有 横向 、 竖 向、 十 字形 3 种 ， 并 随 光 标 移动 ， 如 图 2-26a 所 示 。 


鼠标 单 击 后 ， 图 片 会 沿 辅助 绪 切 割 ， 融 像 图 片 铸 刀 斩 断 了 ， 如 图 2-26b 所 示 。 


选择 辅助 线形 状 


十 字形 辅助 线 沿 辅 助 线 切 开 了 


a ) 正在 切割 b ) 切割 后 


2.6.2 ” 裁 况 图 片 

选择 “裁剪 图 片 ”命令 后 ， 界 面 会 显示 裁剪 虚线 框 。 鼠 标 拖 遇 可 以 移动 虚线 框 。 选 择 菜 单 上 的 3 个 按钮 可 以 实现 3 种 裁剪 效果 ， 即 裁剪 、 甬 切 、 复 
制 1 如 图 2-27a 所 示 。 

` 裁剪 : 只 保留 虚线 框 内 的 部 分 ， 其 他 部 分 删除 ， 如 图 2-27b 所 示 。 

前 切 : 剪 切 虚线 框 内 部 分 〈 原 图 虚线 框 内 部 分 删除 ) ， 可 以 粘贴 图 片 ， 如 图 2-27c 所 示 。 


复制 : 复制 虚线 框 内 部 分 ( 原 图 虚线 框 内 部 分 保留 ) ， 可 以 粘贴 图 片 ， 如 图 2-27d 所 示 。 


a ) 正在 裁剪 b ) 裁剪 后 Cc ) 剪 切 、 粘 贴 d ) 复制 、 粘 贴 
图 2-27 裁剪 图 片 的 几 种 方式 
提示 : 


剪裁 图 片 可 以 切割 成 非常 精准 的 尺寸 。 但 是 切 害 后， 图片 分 辨 率 会 降低 。 如 果 剪 切 后 图 片 素材 本 身 质 量 过 低 ， 可 以 用 一 些 取 巧 的 办 法 。 例 如 ， 先 把 图 
片 放 在 动态 面板 内 ， 然后 缩小 动态 面板 的 显示 范围 ， 间接 地 “剪裁 ” 图 片 。 
站 LE 2 so * ~ 
2.7 ”设置 按钮 的 交互 样式 


Axure RP 可 以 设置 按钮 的 交互 样式 。 例 如 ， 普 通 状 态 下 ， 按 钮 是 日 色 的 ; 当 鼠 标 光标 悬 停 在 按钮 上 时 ， 按 钮 变 为 浅 监 色 市 阴影 ， 单 击 按钮 和 时， 按钮 
变 为 深蓝 色 无 阴影 ， 如 图 2-28 所 示 。 


2-28 的 效果 设置 方法 如 下 : 


(1) 添加 一 个 按钮 。 


(2) 在 属性 栏 窗口 中 ， 


AS 
b ) 光标 悬 停 


图 2-28 ”按钮 的 交互 样式 


通过 “交互 样式 设置 ”功能 进行 设置 ， 如 图 2-29 所 示 。 


(3) 设置 鼠标 光标 悬 停 的 样式 : 设置 字体 颜色 、 线 段 颜色 、 填 充 颜 色 和 外 部 阴影 ， 如 图 2-30a 所 示 。 


(4) 设置 鼠标 按 下 的 样式 : 设置 字体 颜色 、 绪 段 颜 色 和 填 宛 颜色 ， 如 图 2-30b 所 示 。 


( 息 形 名 需 ) 


检视 : 矩形 


pp 区 互 样式 设置 


辟 预览 


图 2-29 ”交互 样式 设置 


VY 


人 ) 鼠标 蛙 击 


| Defayult 


Arial 


| Normal 


3 = 
| 下 | (点 击 切换 为 粗 体 ) 
| 下 | (点 击 切 换 为 斜体 ) 


[可 | (点 击 切换 为 下 划 线 ) 


np 交互 样 式 设置 


下 | 线 宽 


加 | 线 型 

站 | 边框 可 见 性 ” 加 | 边框 可 见 性 

加 | 圆 角 半径 | 贺 角 半径 

圆 角 可 见 性 ~ 同 贺 角 可 见 性 
民 | 填充 颜色 

同 不 透明 (%) 00 | 加 不 透明 (%) 
回 | 外 部 阴影 


贺 预览 


a ) 设置 鼠标 悬 停 样式 b ) 设置 鼠标 按 下 样式 


图 2-30 ”设置 鼠标 光标 巧 停 、 按 下 的 样式 


(5) 单 击 “ 确 定 ” 按 钮 后 ， 属 性 栏 窗口 中 鼠标 光标 悬 停 和 按 下 这 两 种 交互 状态 下 的 样式 就 已 经 设置 好 了 ， 如 图 2-31 所 示 。 


#00CCFF:; 
#0099FF; 


图 2-31 设置 完成 


上 述 设置 ， 是 交互 时 元 件 自 身 的 样式 变化 。 如 果 希 望 交 互 时 其 他 元 件 跟着 变化 ， 如 光标 悬 停 在 菜单 上 ， 出 现 子 菜单 这 样 的 效果 ， 束 需 要 设置 交互 动作 
了 ， 这 将 在 第 4 章 中 详细 讲解 。 


2.8 ”文本 框 样 式 
Axure RP 支持 很 多 常见 的 文本 框 样式 ， 在 “属性 ”选项 卡 中 可 以 进行 设置 ， 如 图 2-32 所 示 。 下 面 会 一 一 介绍 图 2-32 中 的 设置 项 。 
检视 : 文本 框 bb 
(区 于 夏 名 一 


属性 说 明 样式 


允 本 框 类 型 ST Number 
捧 示 文字 
文本 框 握 示 Aa 提示 样 趟 #999999: 
隐 斑 提示 触 点 加 输入 站) 获取 焦点 
限制 | 


图 2-32 文本 框 设置 


2.8.1 文本 框 类 型 


不 同类 型 的 文本 框 ， 其 输入 文字 有 不 同样 式 和 限制 。 例 如 ，Text 类 型 可 以 输入 文本 ，Number 类 型 只 能 输入 数字 ， 密 码 类 型 会 以 圆 点 加 密 显示 输入 文 
本 等 。 


不 同 的 浏览 器 可 能 有 不 同 的 显示 效果 。 如 图 2-33 是 IE 浏 览 器 支持 的 一 些 常 见 的 效果 。 


Number - 


Phone Number 


Un 

查找 mm/dd/yyyy 
文件 一 

日 期 


图 2-33 ”文本 框 类 型 


单 击 日 期 、Month、Time 类 型 的 文本 框 ， 会 弹出 选择 窗口 。 如 图 2-34 所 示 为 日 期 类 型 文本 框 的 弹 窗 。 


2.8.2 ”文本 框 提示 


文本 框 提示 的 效果 如 图 2-35 所 示 。 文 本 框 提示 常见 于 用 户 输 入 文本 前 ， 引 导 用 户 开 始 输入 或 显示 输入 的 限制 条 件 。 


"ei 
三 记 :: ,I 一-. 


图 2-35 ”文本 框 提示 
文本 框 提 示 设 置 方 法 如 下 。 
` 提示 文字 直接 在 属性 栏 输入 。 
: 提示 样式 可 以 在 弹 窗 中 设置 ， 如 图 2-36 所 示 。 通 常 应 该 将 提示 文字 设 为 灰色 以 弱化 。 


` 提示 文字 通常 不 会 一 直 存 在 。 提 示 文 字 会 在 选中 文本 框 时 隐藏 。 


RP 休 互 样式 设置 


| 回 元 件 样式 Defaul 
回 字 休 Arial 
| 贺 字体 类 型 | Normal 
提示 文字 | 国字 RR 3 7 
请 辆 入 账号 | 回 站 体 [ 国 | (点击 切换 为 粗 体 ) 
Aa 提示 样式 #999999， : 笠 体 [| (点 击 切换 为 斜体 ) 
隐 蕊 提示 触发 图 输入 品 获取 焦点 
| 图 TB 陵 | | (点 击 切 换 为 下 划 线 ) 
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图 2-36 ”设置 文本 框 提示 


2.8.3 ”文本 限制 


可 以 限制 文本 框 中 可 输入 什么 样 的 文本 ， 如 图 2-37 所 示 。 


123abc 


图 2-37 从 上 至 下 依次 为 隐藏 边框 、 只 读 、 禁 用 
. 可 以 设置 文本 框 中 可 输入 文本 的 最 大 长 度 。 
` 可 以 设置 文本 框 隐 藏 边框 。 
. 可 以 设置 文本 框 为 只 读 。 只 读 文本 框 不 能 输入 文字 ， 只 能 复制 文本 框 中 的 内 容 。 


“ 可 以 设置 文本 框 为 禁用 。 禁 用 文本 框 不 能 输入 文字 ， 也 不 能 复制 文本 框 中 的 内 容 。 


2.84 “提交 ”按钮 


文本 框 可 以 与 “提交 ”按钮 相关 联 。 
(1) 可 以 将 一 个 “提交 ”按钮 元 件 设置 为 文本 框 的 “提交 ”按钮 。 


(2) 设置 之 后 ，“ 提 交 ” 按 钮 会 与 文本 框 天 联 起 来 ， 在 文本 框 中 按 Enter 键 相当 于 自动 单 击 了 “提交 ”按钮 。 


2.9 ”改变 形状 


元 件 可 以 进行 任意 角度 的 旋转 、 翻 转 。 几 个 元 件 可 以 合并 为 一 个 元 件 。 


2.9.1 旋转 


Axure RP 中 的 元 件 可 以 旋转 为 任意 角度 。 按 住 Ctrl 键 同时 拖 岛 图 形 边 绿 的 点 ， 即 可 让 元 件 随 着 光标 旋转 ， 如 图 2-38 所 示 。 
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图 2-38 ”旋转 元 件 


如 图 2-39 中 “已 完成 ”图 标 束 是 旋转 过 的 效果 。 实 际 中 人 们 苹 章 的 角度 通常 是 较 随 意 的 ， 所 以 做 原型 时 也 可 以 旋转 图 片 来 模拟 这 种 感 沈 。 


王 语 鹿 者 师 


旋转 效果 
花 丸 幼儿 园 向 日 葵 班 班长 选举 


图 2-39 ”旋转 “已 完成 ”标志 


2.9.2 翻转 


除了 旋转 之 外 ，Axure RP 还 支持 翻转 元 件 ， 如 图 2-40 所 示 。 

(1) 石 击 元 件 。 

(2) 从 弹出 的 快捷 菜单 中 选择 “改变 形状 ”命令 。 

(3) 从 “改变 形状 ” 子 荣 单 中 选择 “水 平 ” “垂直 翻转 ”命令 即 可 。 


如 图 2-40a 所 示 为 水 平 翻转 的 效果 ， 图 2-40b 所 示 为 垂直 翻转 的 效果 。 


前 切 (站 
复制 (CQ) 
粘贴 (P) 
粘贴 选项 


编辑 文本 
sa | 转换 为 自 定义 形状 


a ) 水 平 翻转 效果 


全 tf 十 厂 
顺序 (O 〇 ) 


_ 转换 为 母 版 (MI 
b ) 垂直 翻转 效果 转换 为 动态 面板 [D) 


图 2-40 “翻转 


2.9.3 合并 


同时 选中 两 个 元 件 ， 在 如 图 2-41 所 示 的 菜单 中 可 以 看 到 更 多 选项 。 这 些 选项 的 作用 是 合并 两 个 元 件 ， 组 成 新 图 形 。 


ll 


| 


.ao 
二 六 


分 开 


曲 绕 和 连接 各 局 
直线 连接 各 操 


图 2-41 改变 形状 菜单 


如 图 2-42 所 示 为 两 个 元 件 合并 、 去 除 、 相 交 、 排 除 的 效果 。 
合并 : 新 元 件 是 两 者 之 和 。 

相交 : 新 元 件 是 两 者 相交 的 公共 部 分 

去除: 新 元 件 是 第 一 个 元 件 中 去 掉 与 第 二 个 元 件 相 交 的 部 分 


` 排除 : 新 元 件 是 两 者 之 和 ， 但 去 掉 两 者 相交 的 部 分 


Aj A 


a ) 两 个 原始 元 件 b ) 合并 c ) 相交 d ) 去 除 e ) 排除 


图 2-42 元件 合并 、 相 交 、 去 除 、 排 除 


结合 与 合并 类 似 ， 新 元 件 是 两 个 原始 元 件 之 和 ， 如 图 2-43 所 示 。 但 合并 之 后 ， 原 始 的 两 个 元 件 束 不 存在 了 ; 而 结合 之 后 ， 两 个 原始 元 件 的 点 信息 还 
在 ,还 可 以 改变 点 的 位 置 。 


图 2-43 元件 结合 


结合 功能 常用 于 组 合 出 新 的 图 形 当 作 图 标 。 例 如 图 2-44 中 ， 先 用 “钢笔 ”功能 画 出 3 条 线 ， 然 后 将 3 条 线 移 到 在 一 起 后 通过 结合 功能 将 它们 组 合 在 一 
起 ， 这 样 就 做 出 了 一 个 新 的 图 标 。 


LI 


a ) 钢笔 画 线 


Cc ) 最 终 效果 


图 2-44 ”结合 成 图 标 


2.10 布局 


布局 是 所 调整 页 面 上 元 件 的 顺序 、 位 置 等 。 灵 活 运用 布局 功能 ， 可 以 让 原型 页 面 更 简洁 ， 排 版 更 美观 。 


2.10.1 顺序 


Axure RP 中 的 元 件 是 有 上 下 层 遮 挡 关 系 的 。 例 如 ， 最 新 添加 的 元 件 默认 放 企 最 上 层 。 新 元 件 会 遮挡 住 旧 元 件 。 


如 果 想 调整 元 件 的 层级 顺序 ， 可 先 右 击 元 件 ， 在 弹出 的 快捷 菜单 中 选择 “顺序 ”命令 ， 在 其 子 命令 中 选择 调整 元 件 层级 顺序 的 相应 命令 ， 如 图 2-45 
所 示 。 


* 顶层 : 将 元 件 移 到 该 页 面 所 有 元 件 的 最 顶 上 。 
“ 底层 : 将 元 件 移 到 该 页 面 所 有 元 件 的 最 底下 。 
" 上 移 一 层 : 将 元 件 移动 到 当前 层级 的 上 一 层 。 


` 下 移 一 层 : 将 元 件 移动 到 当前 层级 的 下 一 层 。 


置 于 顶层 (1) Ctrl+Shift+] | 转 柳 为 图 片 
置 于 底层 (K) Ctrl+Shift+[ | 


上 移 一 层 ! F) Ctrl 二 ] oH (©) Ctrl+G 


下 移 一 层 (B) Ctrl+[ 顺序 (O) 


图 2-45 “顺序 ” 子 命令 
选中 元 件 才 能 调整 顺序 ， 那 么 怎样 选中 已 经 被 挡住 的 元 件 呢 ? 
如 图 2-46 所 示 ， 如 果 和 希望 选中 被 矩形 挡住 的 文字 ， 有 以 下 两 种 办 法 。 
(1) Ctrl+ 鼠标 左 键 可 以 补充 选中 或 取消 选中 。 
先 框 选 所 有 元 件 ， 然 后 按 Ctrl 键 再 单 击 矩 形 (这 样 融 取 消 和 矩形 选择 ) ， 此 时 被 选中 的 就 只 剩 文字 了 。 
(2) 在 某 个 位 置 多 次 单 击 ， 会 依次 选中 摆 在 这 个 位 置 上 的 所 有 元 件 。 
在 文字 的 位 置 单 击 一 下 ，Axure RP 会 选中 算 形 ， 间 隔 1 秒 再 次 单 击 一 下 ，Axure RP 会 选中 文字 。 


立 O 


单 击 这 里 会 依次 [一 
En >» 按 Ctrl 键 再 单 击 和 矩形 
即 可 取消 选择 


图 2-46 ”选中 遮挡 元 件 


2.10.2 组合 

原型 中 常 剃 有 一 些 模 块 ， 是 由 几 个 元 件 组 成 的 ， 例 如 图 2-47 中 的 图 表 。 在 制作 原型 的 过 程 中 ， 常 常 需要 整体 移动 图 表 的 位 置 。 每 次 都 全 选 骨 移动 ， 
很 厢 烦 ， 并 且 容 易 漏 掉 小 元 件 。 用 “组合” 功能 将 组 成 图 表 的 所 有 元 件 组 合 在 一 起 后 ， 丈 能 整体 移动 、 修 改 这 些 元 件 ， 非 常 便捷 。 

组 合 元 件 的 操作 比较 简单 ， 大 致 有 以 下 3 步 。 

(1) 全 选 元 件 。 

(2) 右 击 元 件 。 


(3) 在 弹出 的 快捷 菜单 选择 “组合 ”命令 即 可 ， 如 图 2-48 所 示 。 
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分 布 ; 
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图 2-48 组合 


2.10.3 “对齐 


信息 比较 多 的 原型 需要 做 好 布局 。 例 如 图 2-49 中 ， 需 要 让 列表 上 的 图 片 对 齐 、 文 字 对 齐 、 按 钮 对 齐 。 


在 Axure RP 中 拖 遇 元 件 时 ， 会 目 动 与 其 他 元 件 的 左 侧 、 右 侧 或 中 心 对 齐 。 目 动 对 齐 时 会 显示 监 色 辅助 线 。 这 样 ， 每 次 移动 元 件 时 ， 都 可 以 根据 辅助 
线 的 提示 直接 放 到 对 齐 的 位 置 。 


顶部 对 齐 
大 侧 对 六 ， 一 .于 | 领取 红包 | 右 侧 对 兖 


海底 捞 王 府 并 店 到 店 领 9 元 
现金 红包 


| ger 


及 斩 房产 到 场 抢 50 元 现金 红 \ 


| 领取 红包 


1 
1 
1 
1 
加 
[四 
| 
用 
I 
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图 2-49 ”移动 时 自动 对 齐 


当 其 他 元 件 比 较 多 ， 形 成 了 干扰 ， 很 难 自动 对 齐 时 ， 可 以 用 主动 对 齐 多 个 元 件 的 功能 。 包 括 左 对 齐 、 左 右 居 中 ， 右 对 齐 、 顶 部 对 齐 、 上 下 居中 、 底 部 
对 齐 。 


对 齐 功能 以 第 一 个 选中 的 元 件 为 基准 。 例 如 图 2-?0 中 ， 所 有 选中 的 元 件 都 对 齐 到 “ 京 翰 学 神 节 …” 的 左 侧 边 绿 。 
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想 要 多 个 元 件 在 同一 条 线 上 对 齐 ， 可 以 使 用 “参考 线 ” 功 能 。 
(1) 在 项 部 标尺 上 按 住 鼠标 左 键 并 向 下 拖 忠 ， 可 以 添加 横向 的 参考 线 ， 如 图 2-51 所 示 。 按 住 左 键 不 松 并 上 下 移动 ， 可 以 看 到 参考 线 的 坐标 值 。 


(2) 松 开 左 键 后 ， 参 考 线 会 停 在 松 开 的 位 置 。 用 类 似 的 方法 ， 再 从 左 侧 标 尺 拖 忠 出 一 条 纵向 参考 线 ， 如 图 2-52 所 示 。 


图 2-51 横向 参考 线 


图 2-52 ”纵向 参考 线 


有 了 参考 线 之 后 ， 当 元 件 被 拖 护 到 参考 绪 附 近 时 ， 会 目 动 贴 在 参考 线 位 置 ， 如 图 2-53 所 示 。 


index 


BUTTON 


图 2-53 元件 贴 在 参考 线 上 


设计 原型 时 可 以 在 页 面 上 需要 对 齐 的 地 方 设置 一 些 参 考 线 。 后 续 添 加 元 件 时 依 参 考 线 对 齐 ， 让 原型 的 布局 更 规整 。 


2.10.4 分 布 


除了 对 齐 ，Axure RP 还 支持 一 种 常用 的 布局 功能 一 一 均匀 分 布 。 例 如 图 2-54 所 示 ， 希 望 让 底部 的 3 个 按钮 两 两 间距 相同 ， 则 可 进行 如 下 操作 。 


(1) 选中 3 个 按钮 。 

(2) 选择 “分 布 ”， 在 下 拉 菜 单 中 选择 “水 平分 布 ” 命 令 ， 如 图 2-54 所 示 。 

水 平分 布 会 保持 当前 选中 的 所 有 元 件 中 最 左边 的 一 个 元 件 和 最 右边 的 一 个 元 件 不 动 ， 然 后 将 其 他 元 件 以 相同 的 间距 均匀 分 布 。 
垂直 分 布 与 此 类 似 。 


» 四 侣 面 
预览 


共享 ”发布 


水 平分 布 {H) Ctrl+shift+H 
垂直 分 布 (V) Ctrl+Shift+U 


图 2-54 ”水 平分 布 


2.11 页 面 样式 


未 选择 任何 元 件 时 ， 样 式 栏 将 显示 页 面 的 样式 信息 ， 如 图 2-55 所 示 。 图 2-55 中 的 Default 指 现在 使 用 的 是 “默认 ”样式 模板 。 


样式 模板 一 一 一 ->| Default 


图 2-55 ”页 面 样式 
默认 样式 为 : 


. 原型 靠 左 侧 排 列 ; 


` 页 面 无 草图 效果 。 


下 面 介绍 页 面 样式 各 选项 的 作用 。 


2.11.1 页 面 排 询 


页 面 排列 是 指 在 原型 生成 的 网 页 中 ， 所 有 元 件 的 位 置 。 如 图 2-56 所 示 为 一 个 网 页 分 别 左 对 


Mpplied Font 


此 中 | 本 过 


齐 和 居中 对 齐 的 显示 效果 。 


页 面 排列 


b ) 页 面 导 中 对 齐 


图 2-56 ”页 面 排列 


2.11.2 ”背景 


原型 页 面 中 可 以 插入 育 景 图 片 。 在 原型 中 设置 页 面 背 景 图 片 的 方法 与 在 计算 机 上 设置 桌面 背景 类 似 。 

背景 颜色 是 指 原型 生成 的 网 页 的 背景 色 。 

-背景 图 片 功能 可 以 将 任意 图 片 设 为 网 页 的 背景 ， 如 图 2-57 所 示 。 

背景 图 片 的 显示 模式 有 以 下 几 种 ， 如 图 2-58 所 示 。 

“ 不 重复 : 图 片 保持 不 变 ， 不 会 缩放 ， 也 不 会 重复 。 

重复 图 片 : 图 片 保持 原始 大 小 ， 根 据 浏 览 器 的 少见 分 辩 率 ， 重 复 显示 多 张 图 片 直 到 充满 整个 屏幕 ， 如 图 2-59a 所 示 。 


` 水 平 重 复 : 与 重复 显示 图 片 类 似 ， 只 在 水 平方 向 重复 显示 图 片 。 


至 景 图 片 | 
导入 图 片 


三 排 证 模式 
图 片 显 示 模 式 


图 2-58 ”背景 图 片 显示 模式 


` 垂直 重复 : 与 重复 显示 图 片 类 似 ， 只 在 重 直 方向 重复 显示 图 片 。 


` 填充: 放大 图 片 直到 填 满 整个 屏幕 ， 图 片 显示 不 下 的 部 分 将 被 隐藏 ， 如 图 2-59b 所 示 。 


` 适应 : 最 大 化 图 片 ， 但 图 片 必 须 完 整 显示 ， 不 能 被 隐藏 ， 如 图 2-59c 所 示 。 


a ) 靠 左 靠 上 排列 b ) 居中 排列 


图 2-60 ”背景 图 片 排列 效果 


2.11.3 ”草图 


原型 在 拿 给 其 他 人 看 或 征求 意见 时 ， 对 方 很 容易 只 提 些 UI 样式 上 的 意见 ， 如 颜色 不 好 看 、 这 里 太 大 、 那 里 太 小 等 ， 而 提 不 出 功能 流程 方面 的 意见 。 


这 主要 是 因为 原型 是 半成品 ， 与 实际 产品 不 完全 一 样 。 一 般 人 很 难 把 自己 带 入 产品 的 使 用 场景 中 ， 只 把 原型 当 作 一 张 图 片 来 考虑 ， 所 以 只 能 提出 UI 方面 
的 意见 。 


要 解决 这 个 问题 ， 要 么 把 原型 做 得 比较 允 真 一 一 内 容 真 实 、 有 交互 ， 把 对 方 带 入 实际 使 用 的 场景 中 ; 要么 干脆 把 原型 做 成 手绘 风格 ， 让 对 方 潜意识 
里 明白 这 个 原型 还 没有 经 过 设计 ， 不 用 提 U|I 方 面 的 意见 。 


Axure RP 支持 将 页 面 设置 为 手绘 风格 ， 如 图 2-61a 所 示 为 正常 样式 ， 图 2-61b 为 草图 样式 。 


rm 

手写 字体 
【10 双 包 邮 ]】 可 爱 卡 通 水 果 图 案 女 袜 秋 冬 保 ¥6.50 【10 双 包 邮 ] 可 爱 卡 通 水 果 图 案 女 袜 秋 冬 保 ...。 羊 5.50 
可 王女 株 可 王女 条 线条 人 曲 、 加 粗 


创 得 防水 坟 身 贴 。 半 6.50 ”可 恬 卡 女生 6.5 创利 防水 纹 盘 贴 。 半 6.50 可 局 卡 女 本 
a ) 正常 样式 b ) 草图 样式 
图 2-61 草图 


在 样式 栏 中 可 以 通过 以 下 几 项 设置 来 调整 草图 的 效果 ， 如 图 2-62 所 示 。 


结 条 写 曲 程度 
彩色 /黑白 
子 体 

线条 粗细 


图 2-62 设置 草图 效果 


-页面 上 所 有 元 件 边缘 线 谊 曲 的 程度 。 


. 元 件 上 是 否 带 颜色 AXUTE Handwriting , 
Axure RP 提供 一 些 手写 字体 ， 如 。 


` 页 面 上 所 有 元 件 边 缘 线 加 粗 。 


2.11.4 ”样式 模板 


调整 完 页 面 样式 之 后 ， 可 以 把 当前 设置 保存 为 模板 ， 以 后 用 时 可 以 直接 选择 模板 ， 无 须 再 设置 每 个 选项 。 模 板 的 选项 区 域 如 图 2-63 所 示 。 


Detault” 


图 2-63 ”模板 选项 
:Default 是 当前 模板 的 名 字 。 
 # 代表 当前 设置 与 模板 相 比 有 变化 。 
. 单 击 “ 更 新 ”链接 ， 可 以 将 更 改 的 设置 更 新 到 模板 中 。 
` 单 击 “创建 ”链接 ， 可 以 将 当前 设置 保存 为 新 的 模板 。 
单 击 最 右边 的 “管理 模板 ”按钮 ， 可 查看 当前 所 有 的 样式 模板 。 
创建 好 样式 模板 之 后 ， 可 以 通过 “页 面 样式 管理 ”面板 管理 页 面 样式 如 图 2-64 所 示 。 


在 原型 的 其 他 页 面 ， 可 以 通过 下 拉 菜 单 快速 选择 保存 过 的 页 面 样式 模板 ， 如 图 2-65 所 示 。 
| np 页 面 样式 管理 


十 x 选择 属性 进行 样式 蔡 换 ， 
| Default ] 


页 面 排 列 三 [三 | < 仅 浏 临 器 中 有 效 > 
网 站 草图 : 


辐 背景 颜色 

加 | 背景 图 片 

四 | 水 平 对 齐 

同 | 垂直 对 齐 

天 | 重复 

- 草图 /页 面 效 果 
草图 


同 颜色 证 


字体 lApplied Font 


| | 线 宽 


图 2-64 ”模板 管理 


Default 


网 站 草图 


图 2-65 ”选择 模板 


2.12 ”案例 2: 给 不 同 模块 制作 不 同 背 景 


如 图 2-66 所 示 为 一 个 常见 的 网 站 原型 。 为 了 让 页 面 上 的 各 个 模块 有 视 党 上 的 分 隔 ， 原 型 中 每 个 模块 都 设置 了 不 一 样 的 背景 。 


图 2-66 ”网 站 原型 


在 2.11.2 节 中 介绍 了 整体 背景 的 设置 方法 。 分 块 的 背景 怎么 设置 呢 ? 可 以 用 动态 面板 设置 。 学 会 下 面 这 个 案例 ， 可 以 加 深 对 动态 面板 和 样式 的 理解 。 
下 面 介绍 具体 的 设置 方法 。 


(1) 添加 一 个 动态 面板 ， 宽 度 、 高 度 均 设 为 小 于 屏幕 分 辨 率 ， 如 1000x382， 名 字 设 置 为 bk， 如 图 2-67 所 示 。 


隐 圳 世 | 


0 0 1000 382 
x% 四 坐标。 9 郝 给 标 宽度 [] 高度 


. 必 
元 件 角 厦 ” 立 杯 多 原 


State1 


二 时 部 角 


4 电 tk (动态 面板 ) 


大 State1 


图 2-67 添加 动态 面板 


(2) 设置 动态 面板 的 背景 图 。 显 示 模 式 为 “填充 ”， 排 询 为 “居中 靠 上 ”， 如 图 2-68 所 示 。 


State1 


图 2-68 ”设置 背景 图 


(3) 右 击 动态 面板 ， 人 在 弹出 的 快捷 菜单 中 选择 “100% 宽 度 ” 个 令 ， 如 图 2-69 所 示 。 


国 ”粘贴 (P) 
粘贴 选项 


管理 面板 状态 


目 动 调整 为 内 容 斥 才 
滚动 条 
国定 到 浏 昂 器.… 


Y ” ”100% 宽度 < 仅 限 浏览 器 中 有 效 > 


图 2-69 ”100% 宽 度 


(4) 添加 一 个 动态 面板 bk2， 背 景 设 为 灰色 ， 同 样 设 为 “100% 宽 度 ”， 如 图 2-70 所 示 。 


检视 : 动态 面板 


[ 国 | 回 | 加 | | 加 | 加 | 国 


不 重复 


概要 : 页 面 
口 网 站 (1) 
4 匾 bk2 (动态 面板 ) 
m State1 
》 坊 bk (动态 面板 ) 


图 2-70 ”添加 灰色 背景 的 动态 面板 


(5) 依照 以 上 方法 出 添加 几 个 有 背景 图 片 或 背景 色 的 动态 面板 ， 如 图 2-71 所 示 。 


草图 /页 面 效果 


门 网 站 (1) 
bk2 (动态 面板 ) 


| 

} bk3 (动态 面板 ) 
上 bk5 (动态 面板 ) 
b bk4 (动态 面板 ) 
» bk6 (动态 面板 ) 
上 bk (动态 面板 ) 


回回 加 加 回回 


图 2-71 添加 更 多 动态 面板 
(6) 设置 页 面 排列 为 “居中 ” 。 


(7) 添加 网 站 的 其 他 元 件 ， 预 览 一 下 ， 可 以 看 到 已 经 实现 了 分 块 背 景 ， 如 图 2-72 所 示 。 


回 网 站 (1) x Ft 


127.0.0.13 


大 师 模 板 


可 能 是 东 半 球 最 全 、 最 好 用 的 AXure 模 板 


最 新 产品 


图 2-72 预览 效果 


2.13 ”案例 3: 绘制 一 个 网 站 原型 


下 面 介绍 一 个 如 图 2- 73 所 示 网 站 后 人 台 原 型 的 制作 方法 。 这 个 原型 样式 比较 复杂 ， 只 要 掌握 了 这 个 原型 ， 融 基本 掌握 了 常用 的 样式 设置 方法 。 


2.13.1 绘制 导 舰 栏 


网 站 原型 通常 都 有 导航 栏 ， 导 航 栏 常 放 在 页 面 左 侧 或 项 部 。 本 案例 中 的 导航 栏 放 在 页 面 左 侧 ， 如 图 2-74 所 示 。 


先 中 背景 
EF 二 8 一 和 日 一 = 
分 类 标题 轴 三 受 和 村 是 示 气 交 


图 2-74 ”导航 栏 
(1) 添加 一 个 和 矩形 元 件 ， 当 作 导 舰 栏 的 背景 
(2) 添加 文字 元 件 和 图 标 图 片 表示 分 类 标题 ， 在 一 个 标题 下 添加 矩形 当 作 选中 状态 硼 
(3) 添加 一 个 圆 角 和 窍 形 ， 代 表 新 消息 提示 气泡 。 


(4) 不 同 层级 的 分 类 标题 间 用 水 平 绕 元 件 分 


~ 


(5) 导航 栏 可 能 会 在 各 个 页 面 用 到 ， 所 以 最 好 将 这 些 元 件 创建 为 一 个 母 版 。 


顶部 栏 包括 搜索 框 、 设 置 、 消 息 、 个 人 按钮 ， 如 图 2-75 所 示 。 


(1) 添加 一 个 矩形 作为 项 部 栏 背 景 。 


(2) 添加 一 个 圆 角 矩形 代表 搜索 杠 


(3) 添加 其 他 按钮 的 图 标 。 


(4) 添加 椭圆 形 并 设置 为 合适 大 小 


(5) 添加 文字 元 件 作 为 昵称 。 


搜索 框 


和 wa ae aa ss 


(6) 顶部 栏 也 应 该 创建 为 一 个 母 版 。 


2.13.2 ”绘制 折线 图 


， 再 添加 一 个 搜索 图 标 代表 “搜索 ”按钮 。 


， 作 为 新 消息 气泡 。 


图 2-75 ”顶部 栏 


下 面 介绍 如 何 制 作 如 图 2-76 所 示 的 折线 图 ， 图 中 包含 两 条 曲线 和 背景 网 格 ， 曲 线 与 网 格 相交 处 突出 显示 ， 曲 线 下 方 填充 颜色 .。 


一 一 
DD 


和 


(1) 用 “钢笔 


(2) 在 折线 图 的 拐点 添加 小 椭圆 形 ， 突 出 显示 这 


(3) 用 同样 的 方法 绘制 男 一 条 折线 。 


bt 


两 条 折线 


网 格 线 


NP a ne a a nt et A 
© - 
四 六 v 7 
< ~» 
© 
图 2-76 ”折线 图 
功能 可 以 画 出 折线 图 的 曲线 部 分 。 画 图 的 时 候 要 画 出 底部 两 个 点 ， 如 图 6-76 中 的 红 框 所 示 ， 这 样 才能 让 填充 色 一 直 履 盖 到 图 的 话 


AAAAMO 


(4) 底部 曲线 的 颜色 设置 为 深 色 ， 顶 部 曲线 设置 为 透明 浅 色 ， 这 样 项 部 曲线 不 会 遮挡 底部 曲线 ， 碍 看 更 方便 。 


(5) 用 水 平 线 和 垂直 续 画 出 折 绪 图 底部 网 格 。 


2.13.3 ”绘制 统计 数据 模块 


下 面 介绍 如 何 制 作 “ 统 计数 据 ” 模 块 ， 如 图 2-77 所 示 。 
(1) 添加 文字 元 件 ， 编 辑 文字 为 各 个 数值 。 

(2) 使 用 上 自动 对 齐 功能 将 数字 分 别 设 为 左 对 齐 和 右 对 齐 。 
(3) 重点 数字 设置 填充 色 ，。 


(4) 用 算 形 元 件 当 作 阅 明文 字 的 背景 ， 在 数字 和 文字 间 形 成 区 域 间隔 。 


兢 对 齐 


填充 色 
右 对 章 
上 下 对 章 
文字 育 景 
图 2-77 “统计 数据 ”模块 
2.13.4 处理 图 标 、 图 片 
给 原型 中 所 有 的 图 标 增加 一 个 圆 形 的 外 框 ， 可 以 让 整个 页 面 更 规整 。 
头像 图 片 可 以 通过 将 圆 角 设 为 最 大 ， 将 图 片 裁剪 为 圆 形 ， 如 图 2-78 所 示 。 
医 | 日 程 
Ce 职工 聚餐 
早操 讲话 
Som 拖 电 小 三 角 将 
天 文 台 观 星 从- 和 9 圆 角 设 为 最 大 


图 2-78 ”处理 后 的 图 标 和 头像 


2.13.5 ”总体 布局 


其 他 模块 根据 折线 图 模块 和 统计 数据 模块 布局 ， 如 图 2-79 所 示 。 


(1) 每 个 模块 的 横向 、 纵 向 间距 都 保持 一 致 。 


(2) 底部 3 个 模块 设 为 同样 的 宽度 ， 平 均 分 布 ， 折 续 图 模块 与 两 个 模块 等 长 。 


AM 9:00 


PM 6:00 


PM 11:30 


图 2-79 ”总体 布局 
(3) 各 模块 的 重点 信息 使 用 相同 颜色 填充 ， 除 黑色 、 灰 色 外 ， 页 面 尽 量 只 用 一 种 颜色 作为 主 色 。 
(4) 底部 3 个 模块 的 标题 保持 在 各 模块 中 同样 的 位 置 。 


(5) 页 面 上 每 个 元 件 都 要 与 其 他 元 件 对 齐 或 居中 ， 或 保持 相同 间距 均匀 分 布 。 


2.13.6 ”设置 页 面 样式 


最 后 ， 将 页 面 排列 设 为 居中 ， 方 便 查 看 ， 如 图 2-80 所 示 。 将 背景 颜色 设 为 灰色 ， 突 出 显示 页 面 上 的 各 个 模块 ， 同 时 也 对 各 个 模块 进行 了 分 隔 。 


图 2-80 ”页 面 样式 


2.14 ”案例 4: 绘制 一 个 APP 原 型 


展示 APP 原 型 有 以 下 两 种 方法 : 


: 将 原型 尺寸 设置 为 与 手机 的 分 辨 率 相符 的 尺寸 ， 用 手机 打开 原型 网 页 ， 向 他 人 演示 4; 


在 原型 页 面 底层 画 一 个 手机 框 ， 在 计算 机 上 打开 原型 网 页 ， 向 他 人 演示 。 


第 9 章 中 会 介绍 如 何 实现 第 一 种 方法 ， 下 面 介绍 第 二 种 方法 。 


如 图 2-81 所 示 为 一 个 APP 原 型 页 面 ， 包含 了 很 多 APP 常 用 的 样式 。 下 面 以 这 个 页 面 为 例 介绍 APP 原 型 的 样式 设置 。 


Fr 


前 


| 


门 1M 4 jy 八 和 峙 | 二 十 站 寺 
2.14.1 绘制 手机 术 


下 面 开 始 添加 元 件 ， 组 成 “手机 框 ”。 

(1) 添加 一 个 圆 角 窍 形 ， 两 个 圆 形 ， 如 图 2-82 所 示 。 

(2) 将 圆 形 设置 为 不 同 颜色 ， 大 圆 为 浅 色 ， 小 圆 为 深 色 。 

(3) 将 圆 形 移 到 圆 角 和 矩形 底部 中 央 ， 两 个 圆 形 蔷 在 一 起 就 像 一 个 按钮 一 样 。 


(4) 这 样 就 做 出 了 图 2-81 中 的 手机 框 了 。 


5 


Lorem lpsum dolor sit amet. consectetur 
adipiscing ellt. Aenean eulsmod bibendum 
laoreet. 


FP 各 
: | 


图 2-81 APP 原 型 


图 2-82 ”手机 框 


下 面 介绍 如 何 添加 一 层 蓝 色 渐 变 遮 章 。 


(1) 在 页 面 顶部 添加 图 片 ， 然 后 在 图 片上 添加 一 个 矩形。 


(2) 将 矩形 的 填充 色 设 为 透明 渐变 色 ， 如 图 2-83 所 示 。 


本 

三 图 阐 
| | | | | 
| | | 


Lb 外 Ng - 


图 加 国 国 国 国 国 友 | 
不 透明 :40 日 


最 近 的 选择 最 近 的 页 面 
国 国 国 画面 属国 硬 国 而 面 国 
LL 


图 2-83 ”设置 透明 渐变 效果 
` 将 要 放 文 字 的 区 域 设 为 低 透 密 深 色 ， 以 凸显 文字 。 
将 不 放 文 字 的 区 域 设 为 高 透明 浅 色 ， 以 凸显 图 片 。 


(3) 在 页 面 底部 添加 图 片 ， 然 后 在 图 片上 放 一 层 彩 色 遮 冀 ， 以 遮盖 图 片上 过 于 鲜亮 的 色彩 ， 让 页 面 看 起 来 更 和 谐 ， 如 图 2-84 所 示 。 


图 2-84 人 遮 音 效果 


2.14.3 ”添加 阴影 


在 图 2-84 的 两 个 按钮 上 添加 阴影 ， 让 按钮 在 视觉 上 更 突出 。 


(1) 左边 按钮 的 阴影 偏 移 量 x 为 -5，y 为 -5， 如 图 2-85 所 示 。 


图 2-85 设置 阴影 效果 
(2) 右边 按钮 的 阴影 偏 移 量 x 为 +5，y 为 -5。 
这 样 阴影 束 分 布 在 按钮 的 四 周 了 ， 立 体感 更 强 。 
页 面 顶部 的 状态 标志 可 以 用 阴影 功能 做 出 模糊 效果 。 
(1) 阴影 可 以 用 黑色 ， 模 糊 效果 适合 用 彩色 。 


(2) 偏 移 量 设 为 0， 让 模糊 效果 均匀 分 布 ， 如 图 2-86 所 示 。 


局 阴影 
偏 移 : xlo |ylo | 


图 2-86 ”设置 模糊 阴影 效果 


2.14.4 设置 页 面 布局 


下 面 开 始 设置 页 面 的 布局 。 布 局 时 注意 将 各 个 元 件 对 齐 或 居中 。 
. 顶部 文字 和 按钮 可 以 与 底部 按钮 左 对 齐 。 


“ “返回 ”按钮 和 “状态 ”标志 对 齐 。 


: 中 部 文字 可 以 在 模块 中 居中 对 齐 。 


图 片 本 身 就 是 比较 好 的 分 隔 ， 所 以 页 面 已 经 自然 分 块 ， 因 此 只 要 适当 增加 水 平 线 、 尼 直线 即 可 完成 页 面 布局 ， 如 图 2-87 所 示 。 
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图 2-87 页面 布局 


第 3 草 ”原型 设计 准则 


本 章 分 别 从 制作 原型 的 技巧 、 设 计 产 品 的 思路 和 用 户 体验 等 几 个 方面 介绍 一 些 设 计 原 型 的 经 验 。 当 然 ， 所 有 规则 都 是 可 以 打破 的 。 读 者 可 以 参照 本 
书 ， 结 合 自身 的 经 验 ， 摸 索 出 属于 自己 的 原型 设计 规则 。 


3.1 ”原型 做 成 高 保 真 还 是 低 保 真 


按 精 细 程 度 ， 原 型 可 以 分 为 高 保 真 原型 或 低 保 真 原 型 。 原 型 应 该 做 成 高 保 真 还 是 低 保 真 一 直 是 个 很 有 争议 的 问题 。 本 节 将 解释 两 者 的 仿 义 ， 并 提出 如 
何在 两 者 间 选 择 的 建议 。 


3.1.1 ”什么 是 高 保 真 和 低 保 真 


原型 按 精 细 程 度 可 以 分 为 高 保 真 原型 与 低 保 真 原型 两 种 ， 如 图 3-1 所 示 。 低 保 真 原型 通常 只 是 简单 的 线 框图 示意 。 而 高 保 真 原型 则 看 起 来 更 像 实际 产 
品 ， 可 以 点 击 ， 可 以 有 各 种 交互 ， 看 起 来 与 真实 的 网 页 、APP 一 样 。 


| 标题 标题 标题 标题 标题 


“| 标题 标题 标题 标题 标题 在 这 个 偏 壁 的 地 万 ， 贡 然 有 这 么 高 冷 的 茶 宫 


标题 标题 标题 标题 标题 


标题 标题 标题 标题 标题 


a ) 低 保 真 原型 


图 3-1 ”高保 真 原型 与 低 保 真 原型 


3.1.2 ”如 何 选 择 高 保 真 与 低 保 真 


型 是 否 要 做 成 高 保 真 效果 ， 应 该 取决 于 观看 者 的 需求 。 
对 方丈 能 明白 。 创 新 的 交互 方式 和 复杂 


很 多 人 在 是 否 用 Axure RP 做 高 保 真 原型 上 犹豫 不 决 、 争 论 不 休 。 其 实 ， 原 
第 有 一 定 的 经 验 。 单 见 的 交互 方式 和 简单 的 功能 逻辑 ， 只 需 低 保 真 示意 
。 这 样 才能 让 沟通 更 顺畅 ， 需 求 表达 更 准确 ， 避 免 沟 通 不 清 ， 技 术 人 员 重 复 劳动 。 

忆 围 ， 在 原型 中 通过 原型 色彩 和 原型 大 小 表现 出 页 面 的 


-二 


~ 


言 息 结构 和 功能 


(1) 与 技术 人 员 沟 通 。 技 术 人 员 通 
品 经 理 要 明确 信息 结 


的 功能 逻辑 ， 需 要 做 出 带 交互 的 高 保 真 原型 
(2) 与 设计 人 员 沟通 。 设 计 人 员 的 主要 精力 放 在 视觉 方面 ， 产 


重点 部 分 和 功能 的 优先 级 。 明 确 了 这 些 ， 设 计 人 员 才 能 更 好 去 设计 。 


(3) 与 客户 、 老 板 沟通 。 这 通 芝 上 友 生 在 产品 方案 的 评审 阶段 。 如 果 你 认为 目 己 的 方案 是 一 个 好 方案 ， 那 么 应 该 想 办 法 让 方案 通过 。 原 型 应 该 尽量 精 
原型 还 应 该 尽量 遍 保 真 ， 以 避免 对 方 纠结 细节 ， 让 沟通 更 顺畅 。 总 之 ， 尽 量 做 出 有 亮点 的 交互 ， 获 取 对 方 的 认可 ， 提 高 自己 的 
能 流程 ， 是 这 类 


美 ， 以 提高 对 方 的 印象 分 ; 
不 得 不 做 高 保 真 原型 。 因 为 ， 如 何 通 过 高 效 的 交互 引导 用 己 完 成 功 


襄 服 力 。 
另外 ， 注 重 交互 的 产品 (如 视频 编辑 、 效 率 办 公 等 类 型 的 产品 ) ， 
产品 的 核心 。 交 互动 田 是 这 类 产品 最 重要 的 一 部 分 。 
吴 ， 觉 得 交互 功能 很 酷 ， 常 常 忍 不 住 给 每 个 页 面 、 每 个 按钮 都 添加 交互 动作 。 到 了 “ 交 作 业 ” 的 时 间 ， 才 友 现 主 功 能 还 可 以 


作者 刚 学 Axure RP 的 时 候 ， 帝 得 
再 优化 ， 产 品 整体 结构 还 有 问题 ， 然 而 已 经 没有 时 间 去 做 这 些 事 了 。 
所 以 ， 一 个 好 的 产品 经 理应 该 掌握 全 部 的 Axure RP 技能 ， 但 在 设计 原型 时 按 需 使 用 ， 把 80% 的 时 间 花 在 产品 主流 程 上 ， 在 主要 页 面 上 创新 交互 ， 规 
次 要 页 面 用 低 保 真 示意 。 这 样 ， 就 能 兼顾 效率 和 效果 了 。 


划 布 局 ， 次 要 功能 尽量 用 党 见 的 方式 实现 。 原 型 中 ， 主 要 页 面 做 高 保 真 示意 


原型 中 要 使 用 贞 实 的 数据 


原型 中 应 该 尽量 使 用 真实 数据 ， 模 拟 真 实情 况 。 因 为 只 有 使 用 真实 数据 ， 才 能 分 析出 准确 的 需求 。 


有 分 
要 试 试 真实 的 书 名 ， 才 知道 要 预 留 多 少 空间 ， 书 名 是 否 足够 吸引 ， 是 


2 过 


主 林 木 . 
/月 候 ， 


例如 图 3-2 中 的 原型 ， 要 试 试 真实 的 书 的 封面 ， 才 知道 图 片 要 放 多 大 能 
， 还 是 列表 合适 。 


否 需要 加 书 的 简介 .…… 所 有 信息 都 是 真实 的 ， 才 能 准确 规划 页 面 布局 用 卡片 合适 


了 了 【了 本 二 
和 


友 摧 


= 攻关 本 天 <E。 


暴 社 群 


烽 4C 法 则 


社 群 ， 移 动 互联 网 


时 代 的 新 4C 法 则 
亩 兴 通 


2 个 好 友 在 读 这 本 书 


dP 上 曲 
7 7 3 办 
EE Ei cy 
| 站 朋 法 


图 3-2 使 用 真实 数据 才能 准确 规划 布局 


考虑 多 种 情况 。 设 计 原 型 时 很 容易 想到 正常 的 流程 ， 但 容易 忽略 分 支流 程 和 异常 情况 。 


b 
已 


绘制 原型 要 做 出 完整 流程 ， 尽 可 和 


3.3.1 考虑 用 尸 出 错 的 情 ; 
用 户 出 错 是 难免 的 ， 所 以 应 该 允许 细微 的 纠正 ， 如 更 换 账号 、 更 换 地 址 等 ， 如 图 3-3 所 示 。 


125485 包 qq.com 


使 用 此 账号 ,加 入 白 度 号 


登录 其 他 账号 


图 3-3 ”允许 更 换 账 号 


3.3.2 ”考虑 系统 出 错 的 情况 


例如 ， 上传 图 片 时 ， 文 件 上 传 失败 ,或 者 对 上 传 的 图 片 不 满意 想 换 一 张 时 ， 产 品 应 该 拥有 重 试 和 重 做 功能 ， 如 图 3-4 所 示 。 


中 国 移动 大 磺 0.04Ki/s 会 | EC 


图 3-4 网络 出 错 的 情况 


3.3.3 ”考虑 ;没有 数据 的 司 


如 果 没 有 初始 数据 ， 用 户 看 到 的 就 是 一 片 空 日 ， 此 时 用 户 可 能 不 知道 该 干什么 。 可 以 利用 好 没有 数据 的 初始 界面 ， 让 用 户 学 习 和 熟悉 如 何 使 用 程序 ， 
引导 用 户 创 建 数据 ， 如 图 3-5 所 示 。 


见 在 就 添加 一 个 积分 
只 需 10 秒 | 


图 3-5 ”没有 数据 的 情况 


3.34 ”考虑 每 一 步 的 状态 


例如 ， 电 商 订单 有 友 货 、 收 货 状 态 ， 邮 件 有 已 读 或 未 读 的 状态 ， 文 付 有 文 付 成 功 或 未 文 付 的 状态 。 可 以 通过 不 同 的 视觉 风 格 ， 如 颜色 、 深 度 和 对 比 度 
帮助 用 户 清 楚 地 知道 目前 的 状态 ， 以 及 接 下 来 要 干什么 事 ， 如 图 3-6 所 示 。 


未 使 用 3 | 待 收 货 1 。 竺 学 价 | 退 款 1 


2016-1-11 1J 单 号 : adf23498 竺 发 佬 


乐 扫 乐 所 格拉 斯 耐 热 玻璃 保鲜 ..… 

5 ¥ 429 1 429 积 分 
郑 色 : 蓝 色 
乐 扣 乐 扣 格拉 斯 耐 当 玻璃 保鲜 ..… ee , i 
总 计 : 429 积 分 
2016-1-11 订单 号 : adf23498 | 查看 物流 小 贷 

¥429 1 429 积 分 
总 计 ; 4298 积 分 


图 3-6 ”订单 的 多 种 状态 


3.3.5 ”添加 适当 的 提示 


当 用 户 执 行 了 一 个 动作 ， 应 该 有 成 功 或 失败 的 提示 。 例 如 ， 友 布 文章 之 后 是 否 发 送 成 功 ， 如 图 3-7 所 示 。 友 送 邮 件 之 后 是 否 友 送 成 功 。 修 改 的 设置 选 


今日 还 能 发 布 1 篇 文章 


友 布 成 功 ， 经 验 +10 


图 3-7 文章 发 布 成 功 提 示 


3.4 ”原型 需要 快速 迭代 


在 软件 开 友 中 ，“ 修 改 ” 是 一 件 成 本 非 党 高 的 事 。 前 期 越 能 上 友 现 错误 ， 修 改 成 本 融 越 低 。 在 原型 阶段 发 现 错误 ， 只 要 产品 经 理 用 几 天 时 间 改 一 下 原型 
即 可 。 如 在 研发 结束 之 后 才 发 现 错误 ， 则 需要 整个 团队 重新 开始 ， 或 许 要 用 几 个 月 的 时 间 才 能 做 出 正确 的 产品 。 因 此 为 什么 要 先 绘制 原型 ， 而 不 是 直接 研 
发 产品 呢 ? 融 是 为 了 能 尽早 友 现 错误 ， 尽 早 修改 。 


3.4.1 沟通 原型 的 近 巧 


在 设计 原型 的 过 程 中 ， 需 要 不 断 地 向 身边 的 人 请 教 意见 ， 不 断 “ 试 错 ”。 切 鼠 一 个 人 纸 面 上 画 画 就 完成 的 原型 制作 ， 一 定 要 找 内 部 或 外 部 的 人 来 控 
讨 。 

(1) 与 别人 沟通 前 应 该 准备 一 个 有 “沟通 能 力 ” 的 原型 。 原 型 做 得 简陋 ， 就 没有 代入 感 。 一 般 人 很 难 对 着 线 框 提 建 议 。 使 用 真实 的 图 片 和 文字 ， 模 
拟 完整 的 使 用 流程 ， 做 出 有 “沟通 能 力 ” 的 原型 ， 对 产品 经 理 分 析 需 求 很 有 帮助 。 

(2) 与 他 人 沟通 时 ， 不 要 维护 自己 的 原型 设计 。 只 有 不 断 地 修改 ， 才 能 打磨 出 有 价值 的 产品 原型 。 拿 着 原型 初稿 与 他 人 沟通 时 ， 要 有 一 种 随时 准 
备 “ 推 倒 ” 重 来 的 气魄 。 

(3) 尝试 去 理解 对 方 的 真正 需求 。 在 与 他 人 沟通 时 ， 肯 定 会 遇 到 不 懂 产 品 设 计 的 人 对 你 设计 的 原型 指 指 点 点 。 干 万 不 要 轻易 陷入 对 方 编织 的 理由 
中 。 将 对 方 喜欢 的 方式 设计 出 来 ， 拿 着 修改 后 的 设计 继续 向 其 他 人 请 教 ， 对 比 之 后 ， 更 容易 得 出 正确 的 结论 。 


(4) 时 刻 关 注 产 品 整 体 。 修 改过 几 次 之 后 ， 可 能 已 经 改进 了 不 少 产 品 的 细节 。 这 时 需要 停 一 下 ， 站 在 整个 产品 的 角度 重新 审视 一 下 一 一 细节 改进 有 
没有 打 乱 整体 规划 ， 量 变 是 否 已 经 引起 质变 ， 产 品 结构 是 否 能 更 优化 等 。 


3.4.2 ”修改 原型 的 技巧 


即使 是 经 验 丰富 的 产品 经 理 ， 也 很 少 在 第 一 次 设计 时 融 能 达到 满意 的 效果 。 大 部 分 时 候 ， 都 要 经 历 5 ~ 10 次 的 反复 迭代 。 而 且 ， 有 时 迭代 不 只 影响 一 
页 ， 甚 至 影响 十 几 页 或 者 更 多 。 因 此 ， 只 有 提高 绘制 原型 的 效率 才能 应 对 频繁 的 更 改 。 下 面 介绍 一 些 提高 Axure RP 效 率 的 方法 。 


(1) 使 用 图 形 ， 而 不 是 图 片 。 在 Axure RP 中 是 无 法 改变 一 个 图 片 的 颜色 和 形状 的 。 直 接 截图 放 进 原型 是 一 个 看 似 快 捷 的 办 法 。 别 志 了 ， 原 型 一 般 都 
要 修改 多 次 ， 使 用 可 以 修改 的 图 形 元 件 而 不 是 图 片 ， 可 以 更 方便 修改 ， 更 好 地 适应 不 同 的 需求 。 所 以 ， 别 嫌 麻 烦 ， 用 图 形 元 件 一 点 一 滴 地 搭建 自己 的 原型 
吧 。 


(2) 用 一 个 元 件 惑 可 以 完成 的 事 不 要 用 两 个 元 件 。 每 添加 一 个 元 件 ， 都 会 给 未 来 添加 一 份 维护 的 工作 。 当 原型 需要 改变 时 都 要 耗费 更 多 的 工作 时 
间 。 例 如 ， 不 要 用 文字 和 和 窍 形 两 个 元 件 来 表示 一 个 按钮 ， 直 接 在 矩形 元 件 上 输入 文本 。 文 本 的 位 置 可 以 通过 对 齐 和 填充 属性 来 自由 调整 。 给 按钮 添加 交互 
事件 时 ， 不 要 添加 热 区 再 给 热 区 设置 交互 ， 直 接 在 按钮 上 设置 交互 即 可 ， 如 图 3-8 所 示 。 


添加 新 文件 


RE 
由 二 各 站 


b ) 一 个 元 件 
图 3-8 ”减少 元 件数 量 更 有 效率 


(3) 将 常用 的 一 组 元 件 转 成 母 版 。 更 改 所 有 页 面 的 导航 栏 的 工作 量 非 常 大 ， 而 且 容 易 出 错 。 但 是 如 果 事先 把 导航 栏 做 成 母 版 ， 更 改 时 只 需 编辑 一 个 
母 版 ， 那 么 整个 原型 就 都 被 更 新 了 。 所 以 ， 无 论 何 时 ， 如 果 发 现 自 己 一 直 在 复制 粘贴 同一 组 元 件 ， 请 创建 一 个 母 版 。 


(4) 保留 旧 的 页 面 。 原 型 页 面 经 过 几 次 修改 之 后 ， 可 能 又 要 找 回 原来 的 页 面 。 所 以 ， 在 做 修改 页 面前 ， 最 好 保留 旧 的 页 面 ， 如 图 3-9 所 示 。 创 建 一 
个 名 为 “旧版 本 ”的 文件 夹 。 复 制 一 份 要 修改 的 页 面 ， 保 存在 “旧版 本 ”文件 夹 中 ， 以 便 需 要 时 随时 找到 。 


新 建文 件 来 2 YQ | "now 
A [| index | 的 
[| page1 
a 
口 pags 添加 (A) 
如 19 版 本 移动 (M) 
名 “删除 (D) 
重 命名 (R) 
重复 (C) 于 一 一 复制 里 个 页 面 
ee 有 2B 复制 页 面 及 其 子 页 面 


医 


图 3-9 复制 旧版 本 的 页 面 


(5) 保留 、 导 入 旧版 本 的 原型 文件 。 原 型 修改 几 次 之 后 会 形成 一 个 稳定 的 版 本 ， 通 剃 会 保存 为 一 个 RP 文件 。 几 个 版 本 之 后 ， 会 积 携 多 个 RP 文件 。 
如 果 想 在 新 版 本 文件 中 使 用 旧版 本 的 页 面 ， 可 以 使 用 “RP 文 件 导入 ”功能 。 在 菜单 栏 中 单 击 “导入 ”按钮 ， 然 后 选择 想 导入 的 页 面 。 


提示 : 


虽然 从 这 一 个 RP 文 件 到 另 一 个 RP 文 件 复 制 、 炸 贴 是 可 以 的 ， 但 样式 是 不 会 跟着 一 起 粘贴 过 去 的 。 重 复 使 用 样式 、 母 版 的 最 好 方法 就 是 使 用 导入 功 
能 ， 如 图 3-10 所 示 。 


| 导入 页 面 


| 请 选择 您 想 要 导入 的 页 面 。 


4 有 商 家 后 台 :三 


口 商品 管理 
口 评价 管理 
中 消费 统计 
口 竟 家 信息 
口 订单 管理 
口 账号 管理 


轩 ”新建 (N) 
加 ”打开 .(O) | 
打开 最 近 编 辑 的 文件 


加 
国 
| 文件 (F) | 编辑 (E) 视图 (V) 项 目 (P) 布局 (A) 发 布 ( 器 
加 
加 


回 ”保存 (S) 
另存 为 ..(A) Ctrl+Shift+S 


从 RP 文件 导入 ...(1) Previous Next 取消 


图 3-10 导入 RP 文件 3.5 页 


3.5 ”页 面 应 该 尽量 简化 


在 功能 层面 ， 改 进 原 型 的 主要 方法 是 简化 产品 的 使 用 流程 。 什 么 叫好 的 用 户 体 验 呢 ?从 打开 APP 开 始 ， 用 户 一 步 一 步 下 意识 地 被 产品 引导 着 完成 功能 
流程 。 整 个 过 程 行云流水 ， 用 尸 使 用 完全 没有 障碍 ， 完 全 沉浸 在 产品 之 中 ， 这 就 是 好 的 用 尸体 验 。 如 果 用 户 使 用 过 程 中 受到 阻碍 ， 用 户 体 验 束 会 奔 ， 则 用 


户 流 失 率 就 会 提高 。 简 化 流程 就 是 要 简化 掉 这 些 阻 碍 ， 让 用 户 使 用 起 来 畅通 无 阻 。 


3.5.1 ”精简 用 户 输 入 内 容 


人 都 是 有 惰性 的 ， 没 人 愿意 填 一 大 堆 表 单 。 表 单 中 每 增加 一 个 字段 ， 都 会 增加 用 户 流失 率 ， 因 此 ， 表 单 页 面 尽量 只 留 必 填 项 ， 其 他 项 放 在 “高 级 ”页 
面 里 。 必 填 项 尽量 以 选择 为 主 ， 填 写 为 辅 。 必 须 填写 的 也 应 该 尽量 给 出 默认 值 。 因 为 选择 只 需要 一 次 单 击 ， 而 填写 则 需要 数 次 键盘 操作 。 精 简 的 目的 就 是 
使 用 更 少 操作 完成 同样 的 功能 。 例 如 ， 图 3-11 中 的 日 期 选择 是 个 麻烦 的 工作 ， 可 以 选项 代替 输入 ， 并 给 出 合适 的 默认 值 。 


Lorem lpsum dolor st amet., consectetur adipiscing ellt. Aenean eyulsmod bibendum 
laoreet. Froin gravida dolor sit amet lacyus accumsan et Viverra justo sommodo. Froin 
sodales pulvinar tempor. Lum soclls natogue penatibus et magnis dis parturient 
montes. nascetyr ridiculus mus. Nam fermentum._ nulla luctus pharetra vulputate felis 
tellus mollis orci, sed Mmoncus saplen Nunc eget 


对 数量 限制 


包 适 用 商家 


图 3-11 精简 用 户 输入 


3.5.2 ”精简 页 面 上 的 元 率 


要 让 设计 具有 层次 感 ， 可 以 将 界面 上 重要 的 部 分 与 不 次 要 部 分 区 分 开 ， 让 界面 层次 分 明 。 但 要 注意 过 多 的 页 面 元 素 会 分 散 用 户 的 注意 力 。 


一 个 公使 夫人 
眼 里 的 北京 


本 期 单 读 冀 频 . 许 志 远 通过 清末 德国 驻 华 公 

使 夫人 的 日 记 . 呈现 出 一 个 想象 之 外 的 中 

习 : 信 那 富有 画面 研 的 文字 是 否 可 以 让 我 们 
钢 清 乱 的 看 等 找 们 的 过 去 ? 


单 烛 音频 


几 10 圭 39 3.2W 


图 3-12 ”精简 页 面 上 的 元 素 


例如 一 些 花 边 ， 分 隔 区 域 时 有 很 大 的 作用 ， 但 同时 其 明显 的 线条 也 会 吸引 走 用 户 的 注意 力 。 除 了 分 隔 线 之 外 ， 通 过 格式 、 布 局 的 变化 也 能 分 隔 两 块 区 
域 。 如 果 运 用 得 当 ， 还 可 以 提高 整个 界面 的 可 读 性 。 


例如 图 3-12 所 示 的 原型 束 是 一 个 元 素 精 简 、 格 式 布局 控制 较 好 的 例子 。 一 个 页 面 只 展示 一 篇 文章， 文章 与 文章 之 间 上 自然 区 卫 开 了 。 标 题 和 内 容 使 用 
不 同 的 字体 区 隔 ， 文 字 与 数据 乙 间 用 空白 进行 区 隅 。 整 个 页 面 很 有 层次 ， 又 很 简洁 。 


3.5.3 ”合并 重复 的 功能 


随 着 产品 的 发 展 ， 不 可 避免 会 增加 很 多 的 功能 模块 。 应 该 及 时 重 构 产品 ,合并 功能 ， 避 免 产 品 “ 腔 有 种”， 阻 碍 用 户 学 习 、 使 用 。 


页 面 很 长 或 者 分 页 的 情况 下 ， 可 以 重复 出 现 同一 个 按钮 ， 但 一 定 要 慎 用 。 例 如 ， 购 物 车 中 ， 如 果 列 表 过 长 则 可 以 出 现 两 次 结算 按钮 。 列 表 较 短 则 没有 
必要 ， 如 图 3-13 所 示 。 


\ 职 礼包 起 市 购物 - 


购物 车 中 有 1 件 商品 


[] 全 造 商品 名 称 虱 格 
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图 3-13 页面 上 出 现 重 复 按 钮 


3.5.4 ”避免 过 多 的 分 支流 程 


为 了 满足 各 类 用 户 的 需求 ， 增 加 功能 是 不 可 避免 的 。 但 有 时 是 更 多 的 选择 往往 让 人 更 难 做 出 决策 ， 让 后 悔 和 上 自 责 倾向 增加 ， 甚 至 降低 了 用 户 满意 度 。 
著名 的 果 桨 研究 实验 一 次 次 的 被 验证 ， 当 选项 过 多 时 ， 给 出 重点 推荐 项 是 个 不 错 的 做 法 。 


例如 图 3-14 中 的 雅虎 新 闻 原 型 ， 不 像 其 他 的 新 闻 APP 一 样 有 过 多 的 分 类 、 过 多 的 选择 ， 而 是 每 半天 提供 8 类 8 条 最 重要 的 新 闻 。 
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a ) 头条 新 闻 


图 3-14 ”雅虎 新 闻 


小 知识 : 


果 交 实验 的 过 程 是 这 样 的 : 


第 一 次 ， 在 超市 中 卖 果 普 的 货架 上 放置 了 24 种 果 普 。 顾 客 看 到 琳琅 满目 的 商 
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b ) 阅读 记录 


品 纷纷 驻足 (60%) ， 有 的 人 还 停 下 来 参与 试 吃 。 但 最 后 购买 率 只 有 


第 二 次 ， 货 架 上 只 放置 了 6 种 果 普 。 在 此 停留 的 顾客 有 所 减少 (40%) ， 但 购买 率 却 高 达 31%， 是 前 一 次 实验 的 10 倍 。 


为 什么 是 这 样 的 结果 呢 ? 可 能 人 们 都 有 选择 丽 惧 症 。 当 人 们 有 太 多 的 选项 时 ， 很 容易 最 后 什么 都 不 选 。 而 选项 简单 ， 决 策 就 容易 ， 顾 客 就 有 更 大 的 概 


Proxy Error 


The proxy server received an mvalid response from an upstream server. 
The proxy server could not handle the request GEY /resource/readBook. 


Reason Error reading from remote server 


3.6 页面 布局 要 随时 优化 


在 结构 层面 ， 改 进 原 型 的 方法 是 优化 布局 。 怎 样 布局 算是 优化 好 了 呢 ? 


有 一 个 简单 的 测试 方法 。 打 开 原 型 ， 看 两 秒 钟 ， 然 后 天 掉 ， 立 即 回忆 。 


:如果 第 一 个 回忆 起 来 的 是 页 面 最 想 表 达 的 东西 ， 那 么 这 个 页 面 就 工 布 局 好 了 。 
` 如 果 第 一 个 回忆 起 来 的 只 是 页 面 上 优先 级 比较 低 的 内 容 ， 那 就 说 明 页 面 的 层次 关系 有 问题 ， 页 面 的 重点 不 对 。 
真正 重要 的 东西 应 该 更 突出 ， 次 要 的 东西 应 该 弱化 。 
这 个 方法 可 以 目测 ， 也 可 以 请 他 人 帮忙 测试 。 但 是 一 个 人 只 能 测 一 和 遍 ， 第 二 志 融 会 有 先前 的 印象 影响 判断 ， 所 以 第 二 饥 测 试 一 定 要 损人 。 


下 面 举 一 些 具体 的 例子 。 


3.6.1 用 图 形 蔡 代 文字 


图 形 比 文字 更 易 懂 ， 应 该 用 直观 的 图 形 展示 蔡 代 直 日 的 文字 描述 。 


文字 部 分 应 该 尽量 简洁 明了 。 文 字 过 多 会 增加 用 户 的 阅读 成 本 和 理解 成 本 。 如 果 文 字 内 容 确实 比较 多 ， 应 该 摘要 显示 ， 用 户 感 兴趣 再 查看 更 多 ， 


是 直接 全 部 展开 。 


例如 图 3-16 中 ， 文 字 摘 述 较 多 时 应 该 引入 图 片 ， 以 增加 页 面 层次 ， 增 加 可 读 性 。 


四 有 哪些 成 本 10 元 以 下 ， 能 带 给 人 美好 享 
有 哪些 成 本 10 元 以 下 ， 能 带 给 人 美好 受惊 攀 感 、 适 全 学生 和 初学 者 的 .… 
享受 惊艳 感 、 适 合 学 生 和 初学 者 的 .， ”29 
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图 3-16 ”图 形 展示 与 文字 描述 的 对 比 


3.6.2 ”突出 重 吕 信 息 


类 似 的 多 个 信息 应 该 显示 出 最 相关 的 几 个 属性 差异 。 对 比 信 息 时 ， 用 表格 形式 比较 清晰 明确 。 


而 不 


例如 ， 图 3-17 中 束 是 一 个 价格 体系 的 介绍 页 面 。 应 用 表格 形式 ， 有 助 于 用 户 对 比 、 决 策 。 


Axure 太 师 


560MB 


图 3-17 表格 形式 的 价格 对 比 


3.6.3 ”把 握 页 面 节 委 


把 页 面 做 得 环 环 相 扣 ， 要 好 过 平 铺 直 叙 。 没 有 节奏 的 页 面 会 让 用 户 失去 兴趣 ， 无 所 适 从 ， 进 而 造成 顾客 流失 。 
应 该 在 页 面 中 适当 地 设置 一 些小 节 ， 注 意图 文 的 比重 、 各 模块 的 分 隅 、 页 面 样式 的 统一 。 页 面 应 节奏 紧凑 ， 环 环 相 扣 。 


例如 ， 图 3-18 中 是 Airbnb 房 屋 详情 页 面 的 原型 。 整 个 页 面 样式 比较 统一 ， 各 部 分 的 间距 比较 合理 。 在 摘 述 房屋 的 文字 下 面 放置 房屋 的 图 片 ， 并 且 图 
片 有 异步 滑动 的 交互 效果 ， 吸 引用 户 向 下 翻阅 ， 查 看 更 多 详情 ， 页 面 节 奏 把 握 得 非常 好 。 


详情 


图 3-18 ”Airbnb 房 屋 详情 页 原型 


3.7 ”要 保持 原型 的 一 致 性 


原型 的 一 致 性 分 为 外 部 一 致 性 和 内 部 一 致 性 。 外 部 一 致 性 要 求 尽量 与 其 他 产品 保持 一 致 ， 降 低 用 户 的 学 习 成 本 。 内 部 一 致 性 要 求 产 品 中 所 有 页 面 保持 


一 致 ， 降 低 用 户 的 使 用 成 本 。 


3.7.1 遵从 惯例 ， 保 持 外 部 一 致 
遵从 惯例 ， 使 用 用 户 已 经 熟悉 的 交互 流程 与 页 面 样式 ， 会 降低 用 户 学 习 成 本 ， 用 户 用 起 来 会 很 方便 。 相 反 ， 与 外 部 不 一 致 则 会 提高 学 习 成 本 。 例 如 ， 
用 户 想 都 不 用 想 就 知道 界面 右上 角 的 叉 叉 是 关闭 页 面 用 的 。 上 点击 一 个 按钮 后 ， 用 户 知道 会 帮 生 一 些 变化 。 


当然 ， 惯 例 是 会 过 时 的 ， 随 着 时 间 的 推移 ， 同 样 的 操作 可 能 被 赋予 新 的 合 义 。 但 是 ， 打 破 常 规 时 一 定 要 注意 ， 对 于 设计 者 显而易见 的 东西 可 能 对 用 户 
不 是 这 样 的 。 


如 图 3-19 所 示 为 一 些 常见 的 APP 布 局 ， 绘 制 原型 时 可 以 参考 。 
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图 3-19 ”常见 页 面 布局 


3.7.2 ”统一 样式 ， 保 持 内 部 一 至 


一 个 产品 内 的 各 个 页 面 的 样式 应 该 尽量 保持 一 致 ， 以 减少 用 户 的 学 习 成 本 。 用 户 不 需要 学 习 新 的 操作 。 例 如 ， 各 个 页 面 的 颜色 ， 按 钮 的 大 小 样式 ， 氮 
击 、 拖 蝶 的 操作 效果 等 各 方面 都 应 该 保持 一 致 。 


如 图 3-20 中 ， 一 个 原型 的 各 个 页 面 使 用 了 相同 的 元 件 ， 整 体 保 持 了 相似 的 样式 。 这 样 不 仅 为 了 满足 一 致 性 原则 ， 而 且 缩 得了 制作 原型 的 时 间 。 


图 3-20 ”原型 的 一 致 性 


第 4 章 ”交互 动画 


做 交互 动画 是 Axure RP 的 强项 。 简 单 的 几 步 设置 就 可 以 让 原型 动 起 来 ， 从 而 实现 有 创意 的 交互 效果 。 用 Axure RP 做 原型 常常 会 引 来 设计 师 的 惊 
el A 
AR 
4.1 基础 概念 


Axure RP 中 可 以 设置 多 种 交互 动画 。 用 Axure RP 制 作 交互 动画 的 过 程 就 是 选择 合适 的 交互 动画 ， 设 置 合适 的 参数 ， 让 交互 动画 发 生 。 在 开始 制作 交 
互动 画 之 前 ， 先 来 了 解 一 下 Axure RP 中 与 交互 动画 相关 的 基础 概念 。 


4.1.1 了 解 4 个 概念 


用 户 操作 会 “ 触 友 ”交互 动画 “用 例 ”， 交 互动 画 可 以 设置 友 生 “条件 ”和 具体 “动作 ”。 触 友 事 件 、 用 例 、 条 件 、 交 互动 作 四 者 的 天 系 如 图 4-1 所 
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图 4-1 Axutre RP 内 部 运行 流程 


1. 触 友 事件 


生成 原型 网 页 后 ，Axure RP 会 监控 每 个 元 件 的 状态 。 若 用 户 的 操作 改变 了 元 件 状 态 ， 则 元 件 会 向 Axure RP 报告 自己 被 怎样 操作 了 ， 发 生 了 什么 样 的 


变化 。 这 个 过 程 就 是 “触发 事件 ”。 常 见 的 触发 事件 有 : 元 件 被 单 击 、 元 件 被 抱 忠 、 元 件 失 去 焦点 ， 元 件 大 小 改变 等 。 
2. 用 例 


上 友 生 和 触 上 事件 后 ，Axure RP 会 检查 有 没有 应 对 这 个 “ 触 友 事件 ”的 应 对 方案 。 如 果 有 ， 则 执行 应 对 方案 。 这 个 应 对 方案 称 为 “用 例 ”。 用 例 是 条 件 
和 交互 动作 的 集合 。 


3. 条 件 


条 件 是 指 执 行 用 例 中 的 交互 动作 前 必须 满足 的 前 提 。Axure RP 在 执行 用 例 中 的 交互 动作 前 ， 会 先 判断 用 例 的 条 件 是 否 满足 ， 条 件 满 足 才 开始 执行 用 
例 。 


4. 交 互动 作 


交互 动作 是 指 原型 针对 用 户 操作 做 出 的 反应 。 第 见 的 交互 动作 有 : 移动 元 件 、 打 开 链 接 、 显 示 / 隐 藏 元 件 等 。 


4.1.2 ”举例 说 明 4 个 概念 

下 面 介 绍 一 个 简单 的 交互 案例 。 例 如 ， 用 Axure RP 做 一 个 登录 页 的 原型 ， 交 互 效果 是 用 户 在 登录 页 面 输入 密码 ， 然 后 单 击 “下 一 步 ” 按 钮 。 这 时 分 
两 种 情况 ， 如 图 4-2 所 示 。 

. 如 果 用 户 输入 了 正确 的 密码 ， 则 跳 转 到 下 一 个 页 面 (显示 “登录 成 功 ”) 。 


如 果 用 户 输 入 了 错误 的 密码 ， 则 弹出 “密码 错误 ”提示 窗口 。 


登录 成 功 ! 
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图 4-2 ”输入 密码 流程 


1. 用 户 操 作 产 生 “ 触 发 事件 ” 
- 用 户 输入 密码 ，“ 输 入 框 ” 产 生 了 一 个 “文本 改变 ”的 触发 事件 。 
: 用 户 单 击 “ 下 一 步 ”， 按 钮 ， “按钮 产生 了 一 个 “和 鼠标 单 击 ” 的 触发 事件 。 
2.Axure RP 查找 事件 对 应 的 “用 例 " 
针对 下 一 步 按钮 的 “鼠标 单 击 ”事件 ， 有 两 个 用 例 一 一 用 例 1、 用 例 2， 分 别 实 现 输入 正确 和 输入 错误 这 两 种 情况 。 
3. 执 行 用 例 前 先 检 查 “ 条 件 ” 
用 例 1 的 条 件 是 用 户 密码 输入 正确 。 用 例 2 的 条 件 是 用 户 密码 输入 错误 。 
4. 执 行 用 例 的 “交互 动作 ” 
用 例 1 的 交互 动作 是 跳 转 到 “登录 成 功 ” 页 面 。 用 例 2 的 交互 动作 是 弹出 “密码 错误 ”窗口 。 


下 面 会 一 步 一 步 把 这 个 例子 从 零 开 始 做 一 遍 ， 同 时 把 4 个 概念 讲 清楚 。 后 面 的 所 有 案例 都 会 按 这 4 个 概念 的 顺序 讲解 。 


4.1.3” 触 友 事 件 


用 户 操作 会 产生 触 皮 事件 ， 例 如 单 击 、 拖 擅 等 。 先 来 看 看 企 Axure RP 中 “事件 ”这 个 概念 是 怎么 体现 的 。 
(1) 打开 Axure RP， 添 加 一 个 文字 元 件 、 一 个 输入 框 元 件 、 一 个 矩形 元 件 。 

(2) 简单 设置 元 件 样 式 。 

(3) 选中 和 矩 形 元 件 ， 如 图 4-3 中 的 左 图 所 示 。 


(4) 观察 “属性 ”区 域 ， 如 图 4-3 中 的 右 图 所 示 。 


最 标 单 击 时 


国标 移 人 时 
晤 标 材 出 时 


图 4-3 ”和 珑 形 元 件 的 事件 


“鼠标 单 击 时 ” “鼠标 移入 时 ” “鼠标 移出 时 ” .…… 


图 4-3 中 红 框 中 的 就 是 “事件 ” 
事件 有 个 特点 ， 就 是 事件 的 名 字 都 以 “时 ”结尾 。 “事件 ” 的 作用 如 其 名 一 样 ， 可 以 用 来 控制 交互 效果 发 生 的 “时 机 ”。 
例如 : 

. 希望 单 击 “ 注 册 ” 按 钮 时 产生 交互 效果 ， 则 在 按钮 的 “鼠标 单 击 时 ”事件 中 添加 用 例 。 

. 希望 让 光标 移动 到 按钮 上 时 产生 交互 效果 ， 则 在 “鼠标 移入 时 ”中 添加 用 例 。 


Axure RP 中 有 很 多 种 事件 ， 下 面 先 了 解 矩 形 元 件 有 哪些 事件 。 选 中 和 矩形 元 件 ， 单 击 “ 更 多 事件 ”按钮 ， 可 以 看 到 如 图 4-4 所 示 的 菜单 。 


鼠标 双击 时 

示 右 击 时 

忌 标 按 下 时 

标 松 开 时 鼠标 操作 产生 的 事件 
饼 标 移动 时 
鼠标 停放 时 
鼠标 长 按时 
按键 按 下 时 
按键 松 开 时 
移动 时 
旋转 时 
尺寸 改变 时 
显示 时 
隐 并 EH 
获取 焦点 时 
失去 焦点 时 
选中 改变 时 
选中 时 
取消 选中 时 
载 入 时 


证 盘 操 作 产 生 的 事件 


元 件 杰 化 产生 的 事件 


图 4-4 拢 形 元 件 的 更 多 事件 
其 中 ， 鼠 标 产 生 的 事件 和 键盘 操作 产生 的 事件 都 比较 好 理解 。 
1. 元 件 变化 产生 的 事件 
下 面 主 要 介绍 “元 件 变 化 产生 的 事件 ”。 
移动 : 是 指 元 件 位 置 坐标 发 生变 化 。 通 常 发 生 在 元 件 被 拖 避 时 。 
- 旋转 : 是 指 元 件 顺 时 针 或 着 时 针 转 动 。 执 行 交 互动 作 “ 旋 转 “” 时 会 触发 这 个 事件 。 
- 尺寸 改变 : 是 指 元 件 宽 度 、 高 度 发 生 改 变 。 执 行 交互 动作 “设置 尺寸 时 会 触发 这 个 事件 。 
` 显示 、 隐 藏 : 是 指 元 件 是 否 能 被 用 户 所 见 。 执 行 交互 动作 “显示 /隐藏 元 件 ” 或 “切换 可 见 性 ”时 会 触发 这 个 事件 。 


` 获取 焦点 、 失 去 焦点 : 是 指 选中 了 某 个 元 件 。 例 如 单 击 输入 框 ， 则 输入 框 中 出 现 光标 了 ， 这 就 是 获取 焦点 了 。 如 果 此 时 再 单 击 一 下 其 他 区 域 ， 输 入 


框 中 不 再 显示 光标 了 ， 那 就 是 失去 焦点 了 。 
` 载 入 时 : 是 指 刚 打 开 原 型 页 面 ， 页 面 上 的 元 件 刚 刚 加 载 出 来 时 触发 的 事件 。 
捉 示 ; 
在 手机 上 看 原型 时 ， 手 指 单 击 相当 于 鼠标 单 击 ， 手 指 长 按 相 当 于 鼠标 长 按 。 
“和 矩形 元 件 ” 中 包含 了 大 多 数 元 件 通用 的 事件 。 除 此 之 外 ， 一 些 特 殊 类 型 的 元 件 会 产生 独特 的 事件 。 
2. 一 些 特殊 类 型 的 元 件 产生 的 事件 
` 单 选 按 钮 元 件 会 产生 事件 “选中 时 “取消 选中 时 ”， 如 图 4-5 所 示 。 


` 在 文本 框 元 件 中 输入 或 删除 文本 会 产生 事件 “文本 改变 时 ， 如 图 4-6 所 示 。 


“时 ”选中 时 

时 ”取消 选中 时 
时 获取 焦点 时 
只 ”失去 焦点 时 


EE EE ES SEE CS" HE SE ES EE EE EEE EE EE 


图 4-5 单 选 校 钮 的 事件 


“时 ”文本 改变 时 
嘱 ”获取 焦点 时 
嘱 ” 尖 去 焦点 时 


图 4-6 ”文本 框 的 事件 
` 动态 面板 切换 状态 会 产生 事件 “状态 改变 时 ”， 如 图 4-7 所 示 。 


:动态 面板 被 拖 慢 会 产生 事件 “ 拖 动 时 ， 如 图 4-7 所 示 。 


鼠标 单 击 时 
拖 动 开始 时 
拖 动 时 
拖 动 结束 时 

向 左 拖 动 第 束 时 
向 右 拖 动 结束 时 
载 入 时 


而 而 而 古 而 末 古 表 


--------- 一 ---- 吴 ----- 一 --- 一 --- 和 


图 4-7 动态 面板 的 事件 


3. 整 个 页 面皮 生变 化 产生 的 事件 


另外 ， 整 个 页 面 发 生变 化 也 会 产生 事件 ， 如 图 4-8 所 示 ( 单 击 页 面 空白 区 域 可 以 看 到 页 面 的 事件 ) 。 


图 4-8 ”整个 页 面 的 事件 


“页 面 载 入 时 ”是 指 页 面 在 浏览 器 中 打开 。 
“窗口 改变 时 ”是 指 浏 览 器 窗口 改变 尺寸 。 


Axure RP 还 有 许多 事件 ， 后 文 的 案例 中 会 涉及 大 多 数 常 用 的 事件 ， 有 兴趣 的 读者 也 可 以 自己 探索 更 多 的 事件 。 


4.1.4 用 例 


Axure RP 可 以 针对 “触发 事件 ”设置 “用 例 ”。 一 个 用 例 代表 一 套 交 互 流程 。 


下 面 看 看 “输入 密码 ”的 案例 是 如 何 设置 用 例 的 。 


(1) 选中 原型 中 的 “下 一 步 ” 按 钮 ， 在 “属性 ”面板 中 的 “鼠标 单 击 时 ”上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “添加 用 例 ” 命 令 ， 如 图 4-9 所 示 。 


局 性 


开 最 标 稳 它 。 添加 用 例 (A) 
下 鼠标 移 删除 所 有 用 例 (D) 


更 多 事件 >>; 


图 4-9 选择 “添加 用 例 ” 命 令 


(2) 在 弹出 的 设置 窗口 中 ,将 “用 例 名 称 ” 改 为 “输入 正确 ”， 如 图 4-10 所 示 。 然 后 用 同样 的 方法 再 添加 一 个 用 例 ， 并 将 “用 例 名 称 ” 改 为 “输入 


销 误 ”。 


np 用例 编辑 < 鼠标 单 击 时 > 


用 例 名 称 输入 正确 
添加 动作 组 织 动作 
4 链接 时 Case1 
4 打开 链接 
当前 窗口 
新 窗口 /新 标签 
弹出 窗口 
父 级 窗口 
关闭 窗口 
》 在 框架 中 打开 链接 
深 动 到 元 件 < 锁 链接 > 
设置 自 适 应 视图 
元 件 
4 显示 /隐藏 
显示 
隐藏 
切换 可 见 性 
设置 面板 状态 
设置 文本 
设置 图 片 
、 设置 选中 
设置 列表 选中 项 
启用 /禁用 


图 4-10 ”修改 用 例 名 称 


(3) 在 “属性 ”选项 卡 中 可 以 看 到 改名 后 的 两 个 用 例 ， 如 图 4-11 所 示 。 


否 有 序号 ”来 快速 辨识 一 个 元 件 是 否 设置 过 用 例 。 


过 
并 
I 


(4) 设置 了 用 例 之 后 ， 元 件 右上 和 角 会 出 现 一 个 序号 ， 如 图 4-12 所 示 。 可 以 通 i 


图 4-11 修改 后 的 两 个 用 例 


图 4-12 ”设置 用 例 后 的 元 件 


用 例 包 括 两 部 分 ， 即 执行 用 例 的 条 件 和 具体 的 交互 动作 。 条 件 和 交互 动作 的 设置 方法 在 4.1.5 节 和 4.1.6 节 中 将 详细 介绍 。 


4.1.5 ”交互 动作 


Axure RP 支持 的 交互 动作 主要 分 为 以 下 5 类 。 

链接 : 打开 新 的 网 页 链接 ， 常 用 于 实现 页 面 间 的 交互 。 

:元件 : 改变 元 件 的 属性 ， 如 可 见 性 、 大 小 和 位 置 等 ， 常 用 于 实现 一 个 页 面 上 的 交互 。 

. 变量 : 通过 设置 变量 值 来 记录 数据 ， 如 记录 输入 的 文字 、 记 录 选 项 的 状态 等 。 

: 中 继 器 : 通过 操作 “中 继 器 ”元 件 来 管理 数据 ， 如 在 表格 中 添加 一 行 数据 、 删 除 一 行 数据 等 。 

. 其 他 : 等 待 、 自 定义 事件 等 不 属于 前 几 类 的 交互 动作 都 归 在 此 类 ， 后 文案 例 用 到 这 些 事件 时 ， 会 分 别 介绍 。 


由 于 Axure RP 中 的 交互 动作 太 多 ， 所 以 不 在 这 里 一 一 介绍 ， 而 是 分 散在 后 文 各 个 案例 中 详细 介绍 。 下 面 附 一 张 表格 (如 表 4-1 所 示 ) ， 可 以 查询 各 个 
交互 动作 出 现在 哪 一 章 的 哪 一 节 。 


表 4-1 各 个 交互 动作 出 现 的 章节 


动作 类 别 动作 名 称 介绍 章节 


各 打开 链接 4.1.5 节 

二 

滚动 到 元 件 4.4.3 节 
隐藏 显示 4.1.5 节 

_ | 

元 件 移动 pp 


( 续 ) 


二 NR 
设置 动态 面板 状态 | 
获取 焦点 4.3.5 节 
元 人 ax 本 |51 
其 他 等 竺 4.3.4 节 


“输入 密码 ”案例 包含 了 “链接 ” “元件” 这 两 种 交互 动作 。 下 面 以 “输入 密码 ”为 例 ， 介 绍 这 两 种 交互 动作 。 
1. 设 置 “输入 正确 ”用 例 的 交互 动作 


(1) 双击 用 例 名 称 ， 弹 出 设置 窗口 。 在 “输入 密码 ”案例 中 ， 输 入 正确 密码 后 的 交互 效 果 是 跳 转 到 下 一 个 页 面 ， 这 里 可 以 用 Axure RP 中 的 交互 动作 
一 一 “打开 链接 ”来 实现 ， 如 图 4-13 所 示 。 


添加 动作 
4 链接 打开 位 置 ”当前 窗口 


打开 包 
4 打开 链接 @ 链接 到 当前 项 目的 某 个 页 面 
当前 窗口 


新 窗口 /新 标签 
弹出 窗口 4 门 index 
父 级 窗口 口 page1 
关闭 窗口 口 page2 
》 在 框架 中 打开 链接 
滚动 到 元 件 < 锚 链 接 > 
设置 自 适 应 视图 
2z 元 件 
4 显示 /隐藏 
显示 
隐藏 
切换 可 见 性 
设置 面板 状态 
设置 文本 〇 链接 到 url 或 文件 < 例如 : D:\ 小 楼 .avi> 
设置 图 瞩 超 链接 page1.html 
》 设置 选中 
设置 列表 选中 项 〇 重新 加 载 当 前 页 面 < 变 旦 修改 有 效 > 
>》 启用 / 竺 用 加 返回 上 一 页 < 变量 修改 无 效 > 


图 4-13 ”添加 动作 
从 图 4-13 中 可 以 看 到 设置 一 个 动作 分 为 以 下 3 步 。 
` 添加 动作 : 在 左 侧 菜单 中 单 击 不 同 的 动作 ， 即 可 添加 该 动作 。 本 例 中 ， 应 该 选择 “链接 -打开 链接 -当前 窗口 ”。 
` 组 织 动 作 : 可 以 调整 多 个 已 添加 动作 的 先后 顺序 。 本 例 中 只 有 一 个 动作 ， 因 此 这 里 可 以 忽略 。 
` 配置 动作 : 这 里 用 来 设置 每 个 动作 的 具体 信息 。 本 例 中 “打开 链接 动作 有 两 个 属性 需要 配置 ， 分 别 如 下 。 


` 打开 位 置 : 有 4 个 选项 ， 分 别 是 当前 窗口 、 新 窗口 /新 标签 、 弹 出 窗口 和 父 窗口 。 其 中 ， 前 3 个 选项 比较 好 理解 。 父 窗口 与 弹出 窗口 是 对 应 的 ， 指 的 


是 弹出 窗口 的 原 窗 口 ， 而 不 是 内 联 框 架 的 上 层 。 


` 打开 链接 : 有 4 个 选项 ， 分 别 是 当前 原型 项 目 中 的 页 面 、 外 网 的 链接 、 刷 新 当前 页 面 〈 已 修改 的 变量 有 效 ) 、 返 回 上 一 页 。 


(2) 单 击 “确定 ”按钮 ， 可 以 看 到 已 添加 的 动作 ， 如 图 4-14 所 示 。 


(3) 做 好 page1 页 面 ， 然 后 发 布 原型 。 在 网 页 中 单 击 “ 下 一 步 ” 按 钮 ， 可 以 看 到 弹出 了 一 个 菜单 ， 两 个 用 例 并 列 显 示 出 来 了 ， 如 图 4-15 所 示 。 这 是 
因为 此 时 还 没有 给 用 例 添加 条 件 。 两 个 用 例 都 判断 为 “满足 条 件 ”， 都 可 以 被 执行 。 有 多 个 可 执行 用 例 的 情况 下 ，Axure RP 会 把 所 有 的 用 例 都 显示 出 
来 ， 让 用 户 选择 执行 哪 一 个 用 例 。 


4 “ 虱 旺 标 单 击 时 
站 王 ”输入 正确 


多 在 当前 窗口 打开 page1 
二 ”输入 错误 
“时 ”鼠标 移入 时 
导电 标 移出 时 


图 4-14 已 添加 的 动作 


图 4-15 ”选择 用 例 


(4) 单 击 “ 输 入 正确 ”按钮 ， 页 面 会 跳 转 到 page1 页 面 。 


2. 设 置 “输入 错误 ”用 例 的 交互 动作 


(1) 在 页 面 任意 位 置 添加 矩形 和 文字 元 件 ， 组 成 “错误 提示 窗口 ”， 如 图 4-16 所 示 。 


(2) 选择 这 些 元 件 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “转换 为 动态 面板 ”命令 ， 如 图 4-17 所 示 。 


确定 


图 4-16 ”密码 错误 提示 窗口 


Ctrl+G 


转换 为 母 版 (IM) 
志 卉 为 动态 面板 


图 4-17 转换 为 动态 面板 


(3) 将 动态 面板 改名 为 “错误 提示 窗口 ”。 可 以 看 到 上 一 步 操作 其 实 是 在 选中 的 元 件 外 面 套 了 一 层 动态 面板 ， 如 图 4-18 所 示 。 现 在 “密码 错误 ”等 
元 件 都 放 企 动态 面板 “错误 提示 窗口 ”的 状态 state1 中 了 。 


(4) 右 击 “错误 提示 窗口 ”， 在 弹出 的 快捷 荣 单 中 选择 “ 设 为 隐藏 ”命令 ， 然 后 再 选择 “固定 到 浏览 器 ”命令 ， 如 图 4-19 所 示 。 


SE 概要 : 页 面 


密码 错误 4 量 错 吴 提示 窗口 (动态 面板 ) 


二 State1 


确定 


-一 一 -一 一 一 -一 -一 一 国 一 一 一 一 一 一 一 -一 一 


图 4-18 ”给 动态 面板 改名 


口 加 


管理 面板 状态 
密码 错误 。 | v ”自动 洞 整 为 内 容 尺 二 


滚动 条 
国定 到 浏览 器 .… 
100% 宽 度 < 仅 限 浏览 器 中 有 效 > 


图 4-19 ” 设 为 隐藏 


(5) 在 弹出 的 “国定 到 浏览 器 ”窗口 中 ， 将 固定 方式 设置 为 水 平 居中 和 垂直 居中 ， 如 图 4-20 所 示 。 (通常 可 以 将 弹出 窗口 设 为 居中 ， 顶 部 标题 栏 设 
为 靠 上 ， 底 部 操作 按钮 设 为 靠 下 ) 


w 固定 到 浏览 器 


相对 固定 动态 面板 到 浏 唤 絮 ,始终 保持 住 相同 的 位 置 。 < 该 
效果 只 适用 于 浏览 器 > 


牌 直 固定 


上 


| @ 居 中 | 
下 
边 距 : 0 


顶层 < 仪 限 浏 哎 絮 中 > 


图 4-20 定 到 浏览 器 


(6) 编辑 用 例 “ 输 入 错误 ”。 添 加 动作 “显示 ”， 在 “配置 动作 ”区 域 选中 “错误 提示 窗口 (动态 面板 ) ” 复 选 框 。 然 后 在 “更 多 选项 ”中 选 
择 “ 灯 箱 效果 ”， 如 图 4-21 所 示 。 


“显示 ”动作 有 以 下 4 个 配置 项 。 


. 可 见 性 : 可 以 将 元 件 设 为 可 见 (显示 ) 、 不 可 见 (隐藏 ) ， 或 者 根据 当前 状态 切换 为 相反 的 状态 (切换) 。 隐 藏 、 切 换 、 显 示 三 个 动作 的 配置 项 稍 
有 不 同 。 


` 动画 : 控制 元 件 出 现 或 者 消失 时 的 动画 效果 。 下 面 只 介绍 显示 的 动画 ， 隐 藏 的 动画 与 此 类 似 。 


. 无 : 立即 出 现 ， 无 动画 效果 。 


rp 用 例 编辑 < 鼠标 单 击 时 > 


用 例 名 称 输入 错误 添加 条 件 
添加 动作 组 织 动作 配置 动作 
4 链接 ^* | | 4 号 输入 错误 选择 要 隐藏 或 显示 的 元 件 
4 打开 链接 影 品 示 错误 提示 窗口 灯箱 效果 昔 #6 几 | 隐藏 未 命名 的 元 件 
当前 窗口 
新 窗口 /新 标签 
弹出 窗口 
父 级 窗口 
关闭 窗口 
4 在 框架 中 打开 链接 
内 联 框 架 
父 级 框架 
滚动 到 元 件 < 锚 链 接 > 
设置 自 适 应 视图 
4 元 件 
4 显示 /隐藏 
显示 可 见 性 @ 显示 O 〇 隐藏 〇 切换 
ji 动画 | 无 -| 时 间 500 | 毫 种 
切换 可 见 性 
设置 面板 状态 回 重 于 顶层 
a 更 过 
设置 图 片 
》 设置 选中 背景 色 酮 


同 当前 元 件 
4 加 ] 错误 提示 窗口 (动态 面板 ) 显示 灯箱 效果 


| 确定 | 


图 4-21 编辑 用 例 
. 逐渐 : 元 件 从 完全 透明 开始 ， 逐 渐 降低 透明 度 ， 最 终 变 为 不 透明 ， 正 常 显 示 。 


. 向 上 滑动 (向 下 滑动 /向 左 滑动 /向 右 滑动 ) ; 开始 看 不 到 元 件 ， 然 后 从 底部 位 置 开 始 ， 元 件 逐 渐 上 移 并 显示 出 来 ， 最 后 停 在 原型 中 元 件 所 在 位 置 ， 
元 件 完全 显示 出 来 。 其 他 情况 与 之 类 似 ， 不 再 痪 述 。 


. 向 上 翻转 (向 下 翻转 /向 左 翻转 /向 右 翻转 ) : 开始 看 不 到 元 件 ， 然 后 像 旋转 门 一 样 ， 元 件 沿 中 轴线 翻转 出 现 ， 当 元 件 完全 显示 出 来 之 后 ， 停 止 转 
动 。 其 他 情况 与 之 类 似 ， 不 再 间 述 。 


" 置 于 顶层 : 显示 时 ， 将 元 件 层级 置 于 顶层 。 

“ 更 多 选项 : 给 出 了 以 下 几 种 常见 的 交互 效果 。 

无 : 无 交互 效果 。 

` 灯箱 效果 : 类 似 于 弹 窗 效果 。 元 件 出 现时 ， 在 页 面 上 增加 一 层 黑色 透明 遮 单 。 遮 单 闫 色 可 调整 。 鼠 标 单 击 遮 单 部 分 ， 元 件 会 自动 隐藏 。 
弹出 效果 : 类 似 于 弹出 菜单 效果 。 元 件 出 现 后 ， 只 要 鼠标 移出 元 件 范围 ， 元 件 就 会 自动 隐藏 。 


:推动 元 件 : 类 似 于 展开 下 一 级 菜单 的 效果 。 元 件 出 现时 ， 会 将 页 面 上 其 他 元 件 推 开 ， 给 自己 留 出 空间 。 如 图 4-22 所 示 ， 可 以 选择 只 推 开 下 方 的 其 他 
元 件 ， 或 者 只 推 开 右 侧 的 元 件 ， 还 可 以 选择 被 推动 的 元 件 的 动画 效果 。 


Axure RP 的 动画 效果 建议 读者 自己 试 一 试 ， 理 解 起 来 更 直观 。 


(7) 此 时 ,已 经 设置 好 了 两 个 用 例 的 动作 ， 如 图 4-23 所 示 。 


时 间 500 


图 4-22 ”推动 元 件 


4 有 鼠标 单 击 时 
4 于 输入 正确 
9 J 并 page1 


是 示 窗口 弹出 效果 


图 4-23 ”用例 的 动作 设置 


4.1.6 ”条件 


若 一 个 触发 事件 有 多 个 用 例 ， 通 常 要 给 用 例 设置 “条 件 ”。 这 样 束 能 在 不 同情 况 下 ,执行 不 同 的 用 例 。 
1. 举 例 讲解 如 何 设置 条 件 
本 节 仍 以 “输入 密码 ”案例 为 例 ， 给 用 例 设置 条 件 ， 让 原型 根据 密码 是 否 正确 ， 执 行 不 同 用 例 。 
先 假设 正确 的 密码 是 123。 这 样 ， 判 断 密码 是 否 正 确 ， 融 可 以 简化 为 判断 文本 框 中 输入 的 文字 是 人 否 等 于 123。 


(1) 设置 文本 框 名 称 为 “密码 ”， 如 图 4-24 所 示 。 这 便于 后 续 设 置 过 程 中 ， 可 根据 名 称 选中 这 个 文本 框 。 


123。 


确 


直接 输入 


图 4-24 设置 文本 框 名 称 

(2) 编辑 用 例 “输入 正确 ”。 单 击 “ 添 加 条 件 ” 按 钮 ， 弹 出 “条件 设 置 ” 对 话 框 ， 然 后 按 如 图 4-25 所 示 设 置 条 件 一 元 件 选择 “密码 ” ， 值 填写 
这 样 设置 的 含义 是 当 “密码 ” 文 本 框 中 的 文字 等 于 123 时 ， 执 行 用 例 。 
RP 条 件 设立 


符合 全 部 ”~| 以 下 条 件 清除 全 部 


图 4-25 设置 条 件 


(3) 编辑 完 用 例 “输入 正确 ”的 条 件 之 后 ， 属 性 栏 中 的 两 个 用 例 都 上 友 生 了 变化 ， 如 图 4-26 所 示 ， 可 以 看 到 用 例 的 条 件 和 区 互动 作 的 摘 述 。“ 输 入 正 


的 条 件 是 刚刚 设置 的 ，“ 输 入 错误 ”的 条 件 是 自动 出 现 的 。 


If 证 字 : 千 re == "1 D3" 


多 在 当前 窗口 打开 page1 


4 又 输入 错误 
(Else If True | 


图 4-26 设置 了 条 件 的 用 例 逻 辑 


“输入 正确 ”的 条 件 “(if 文 字 于 密码 ==”123”) ”表示 如 果 “ 密 码 ” 文 本 框 上 的 文字 等 于 123， 则 执行 用 例 “ 输 入 正确 ”。 其 中 ， if 是 表达 逻辑 
关系 的 。 它 表示 如 果 if 后 面 的 条 件 成 立 ， 则 执行 这 个 用 例 ; 否则 跳 过 这 个 用 例 。 


“输入 错误 ”的 条 件 “(ElseifTrue) ”表示 如 果 用 例 “ 输 入 正确 ”的 条 件 不 成 立 ， 则 执行 用 例 “ 输 入 错误 ”、。 其 中 ，Else if 是 表达 逻辑 关系 的 。 
else if 一 般 跟 if 配 套 出现 ， 表 示 如 果 if 条 件 不 成 立 ， 则 检测 else if 条 件 是 否 成 立 。 如 果 else if 条 件 成 立 ， 则 执行 用 例 ; 否则 跳 过 这 个 用 例 。 


条 件 设立 ”界面 介绍 


下 面 介 绍 “ 条 件 设 立 ” 界 面 中 的 几 个 概念 。 


Axure RP 中 可 以 判断 很 多 类 型 的 值 ， 如 图 4-27 中 以 “元 件 文字 ”是 否 等 于 123 作 为 判断 条 件 。 同 时 在 图 4-27 中 也 列 出 了 更 多 值 类 型 。 


Rp 备件 设立 


添加 、 删 除 条 件 


人 焦点 元 件 文字 
元 件 文字 长 度 元 件 文字 长 度 
被 选项 | 被 项 

选中 状态 | 选中 状态 
面板 状态 ] 

元 件 可 见 

按 下 的 键 

指针 

元 件 范围 值 类 型 天 系 侍 与 


目 适 应 视图 


图 4-27 条 件 窗口 的 各 个 选项 


焦点 元 件 文字 : 当前 焦点 所 在 的 元 件 上 的 文字 。 


元件 文字 长 度 : 元 件 上 文字 的 字数 。 例 如 ， 想 判断 用 户 输入 的 是 不 是 手机 号 ， 可 以 判断 元 件 上 文字 的 长 度 是 否 等 于 11。 


` 被 选项 : 当前 选中 的 下 拉 列 表 元 件 上 的 文字 。 


选中 状态 : 茶 个 元 件 是 否 被 选中 。 选 中 为 tue， 未 选中 为 false。 


. 面板 状态 : 动态 面板 的 当前 状态 。 例 如 ， 想 判断 开关 是 否 打 开 ， 可 以 先 在 动态 面板 的 状态 1 中 画 一 个 打开 的 开关 ， 在 状态 2 中 画 一 个 关闭 的 开关 。 判 
断 动态 面板 是 否 处 于 状态 1， 就 相当 于 判断 开关 是 否 打 开 。 


“元件 可 见 : 某 个 元 件 是 否 可 见 。 可 见 为 ttue， 隐 藏 为 false。 


“ 按 下 的 键 : 可 以 作为 判断 条 件 。 例 如 ， 判 断 按 下 的 键 是 不 是 Entet 键 ， 是 否 进入 下 一 个 页 面 。 


指针 : 就 是 鼠标 光标 的 位 置 。 可 以 判断 光标 是 否 进入 某 个 元 件 的 范围 内 。 


-元件 范围 : 元 件 所 占 的 整 片 位 置 。 可 以 判断 元 件 范 围 是 否 与 另 一 元 件 重合 。 


. 自 适 应 视图 : 在 后 文 将 详细 介绍 


条 件 的 关系 符号 有 以 下 10 种 . 
a 
“1 =” 表 示 “ 不 等 于 。 
“< 和 > 表示 小 于 和 大 于 号 。 
“ 之 = 表示 小 于 等 于 号 。 


“ >= 表示 大 于 等 于 号 。 


“包含 ”: 如 字面 意思 ， 表 示 关 系 符号 前 面 的 文字 中 是 否 包 含 了 后 面 的 文字 。 例 如 ， 判 断 “ 邮 件 ” 文 本 框 中 是 否 包 含 @。 “不 包含 ”的 意义 与 之 相 
反 ， 较 好 理解 ， 不 再 殴 述 。 


“是 ”: 用 来 判断 值 的 类 型 (文字 、 数 字 等 ) 。 例 如 ， 判 断 “ 手 机 号 ”文本 框 中 是 否 都 是 数字 。“ 不 是 ”的 意义 与 此 类 似 较 易 理 解 ， 不 再 殴 述 。 
组 合 条 件 : Axure RP 人 允许 设置 多 个 条 件 。 
` 图 4-27 中 右上 角 红 色 标 注 框 中 的 按钮 可 以 添加 或 删除 一 个 条 件 。 


. 图 4-27 中 左上 角 的 选项 可 以 设置 多 条 件 整 体 成 立 的 模式 


多 个 条 件 同时 符合 ， 才 算 整体 成 立 ; 或 者 多 个 条 件 中 只 要 有 任意 一 个 符合 ， 就 算 整 体 成 


3.“if......else if......” 结 构 


条 件 语句 一 般 分 为 两 部 分 ， 即 逻辑 天 系 和 条 件 内 容 。 本 节 案 例 中 两 个 用 例 的 条 件 语句 如 表 4-2 所 示 ， 两 个 用 例 的 逻辑 天 系 是 “ 计 ……else if..…...”。 


表 4-2 ”条件 语句 


用 例 逻辑 关系 条 件 内 容 
输入 正确 文字 于 密码 ==123 
输入 错误 true 


若 两 个 用 例 的 条 件 中 出 现 “if..….else if.…..”， 则 依次 检查 这 两 个 用 例 的 条 件 。 若 条 件 满足 则 执行 用 例 并 停止 检查 ， 否 则 继续 检查 。 执 行 流程 如 图 4- 
28 所 示 。 


如 果 有 多 个 用 例 ，if 只 能 有 一 个 ，else if 可 以 有 多 个 。 例 如 : 
" 用 例 1 if XXX 

: 用 例 2 else if XXX 

: 用 例 3 else if XXX 


用 例 4 else if XXX 


停止 检查 
执行 让 用 例 其 他 用 例 的 条 件 
让 条 件 是 个 成 立 


加 亭 止 检 碍 
执行 else 让 用 例 停止 检 


else 1f 条 件 其 他 用 例 的 条 件 


是 全 成立 


继续 检 碍 
后 续 用 例 的 条 件 


图 4-28 if:……… else if:.…:- 的 执行 逻辑 


这 些 用 例 的 执行 逻辑 是 这 样 的 : 按 从 上 到 下 的 顺序 ， 依 次 检查 用 例 的 条 件 ， 震 条 件 满 足 ， 则 执行 用 例 并 停止 检查 ， 人 否则 继续 检查 后 续 的 其 他 用 例 条 
件 。 


细心 的 读者 可 能 已 经 友 现 了 ， 如 果 所 有 的 条 件 都 不 满足 ， 则 一 个 用 例 都 不 会 执行 。 为 了 避免 这 种 情况 ， 通 常会 将 最 后 一 个 用 例 的 条 件 内 容 设 为 true。 
例如 : 


" 用 例 1 if XXX 

. 用 例 2 else if XXX 

"用例 3 else if XXX 

用例 4 else if true 

true 永 远 表 示 条 件 成 立 ， 它 可 以 用 来 “ 忽 底 ”。 即 使 用 例 1、 用 例 2、 用 例 3 的 条 件 都 未 满足 ， 用 例 4 也 会 被 执行 。 
下 面 举 一 个 例子 ， 如 表 4-3 所 示 。 


表 4-3 各 用 例 的 条 件 及 交互 动作 


更 ET 
ER 
有 2 |elsoif 记 克 为 222 | 直入 用 上 2 的 史 
有 衣 3 |elso1f 密友 为 333 | 进入 有 3 的 本 


用 例 4 else if true 弹出 错误 提示 


案例 的 效果 是 输入 111 进 入 用 户 1 的 界面 ， 输 入 222 进 入 用 户 2 的 界面 ， 输 入 333 进 入 用 户 3 的 界面 ， 除 此 之 外 都 弹出 错误 提示 。 


案例 中 有 4 个 用 例 。 它 们 的 关系 是 “if...…...else if...…...else if......else if true” 。 执 行 时 ， 会 依次 检查 各 用 例 的 条 件 ， 并 执行 第 1 个 满足 条 件 的 用 例 。 即 
使 用 例 1、 用 例 2、 用 例 3 的 条 件 都 不 满足 ， 也 一 定 会 执行 用 例 4。 用 例 1、 用 例 2 和 用 例 3 分 别 实现 了 3 个 用 户 的 登录 。 用 例 4 实 现 了 “ 除 此 之 外 都 弹出 错误 
提示 ”的 效果 。 


if..…..else if..….. 结 构 的 用 例 ， 在 执行 时 会 依次 检查 用 例 的 条 件 ， 并 只 执行 第 1 个 满足 条 件 的 用 例 。 如 果 想 实现 “执行 所 有 满足 条 件 的 用 例 ” 的 效果 可 
以 使 用 “if..…..if..…..” 结 构 。 


"if.…..if.….. ”结构 的 用 例会 根据 各 自 的 条 件 是 否 成 立 来 决定 该 用 例 是 否 执行 。 最 终 可 能 执行 其 中 一 个 ， 也 可 能 所 有 用 例 都 执行 或 所 有 用 例 都 不 执 


Axure RP 默 认 会 将 用 例 设置 为 “ifhttp://www.hzcourse.comy/resource/readBook? 
path=/openresources/teach ebook/uncompressed/17272/OEBPS/Text/...else if true” 的 关系 。 想 要 改 
为 “ifhttp://www.hzcourse.com/resource/readBook? 
path=/openresources/teach ebook/uncompressed/17272/OEBPS/Text/...ifhttp://www.hzcourse.com/resource/readBook? 


path=/openresources/teach ebook/uncompressed/17272/OEBPS/Text/...” 的 关系 ， 可 以 右 击 条 件 ， 然 后 在 弹出 的 快捷 菜单 中 选择 “切换 为 <If> 或 
<Else if>” 命 令 ， 如 图 4-29 所 示 。 


下 面试 一 试 不 同 逻 辑 结构 的 执行 效果 。 
(1) 将 “输入 错误 ”的 条 件 改 为 f， 如 图 4-30 所 示 。 
此 时 单 击 “ 下 一 步 ” 按 钮 的 执行 效果 是 什么 呢 ? 


. 当 输 入 124 时 ，“ 输 入 正确 ”的 条 件 不 成 立 ，“ 输 入 错误 ”的 条 件 成 立 。 所 以 会 弹出 “错误 提示 ”窗口 。 


- 当 输 入 123 时 ，“ 输 入 正确 ”的 条 件 成 立 ，“ 输 入 错误 ”的 条 件 也 成 立 。 原 型 会 同时 打开 page1， 并 弹出 “错误 提示 窗口 
(2) 将 “输入 错误 ”的 条 件 改 为 密码 不 等 于 123， 如 图 4-31 所 示 。 


此 时 ， 两 个 用 例 的 条 件 互 补 。 单 击 “ 下 一 步 ” 按 钮 的 执行 效果 与 条 件 为 else if true 时 一 样 。 


切换 为 <If> 或 <Else | 上 > 


图 4-29 ”切换 if 或 else if 


4 总 输入 正确 
(f 广 字 于 密码 == "123") 


FP 


大 ，” 旦 示 错误 误 示 窗口 灯箱 效果 
时 ”鼠标 移入 时 
“时 ”局 标 移出 时 


“居民 标 单 击 时 


4 二 


(文字 于 杰 码 == "123"] 
用 在 当前 窗口 打开 page 


4 本 输入 


(lf 于 A | 一 123”) 
和 多” 显示 错误 提示 军 F 


鼠标 移入 时 
鼠标 移出 时 


图 4-31 条 件 改 为 密码 不 等 于 123 
. 当 输入 124 时 ，“ 输 入 正确 ”的 条 件 不 成 立 ，“ 输 入 错误 ”的 条 件 成 立 ， 所 以 会 弹出 “错误 提示 ， 窗 口 ” 


` 当 输 入 123 时 ，“ 输 入 正确 ”的 条 件 成 立 ，“ 输 入 错误 ”的 条 件 不 成 立 ， 所 以 会 打开 page1。 


4.2 ”动态 面板 
动态 面板 是 一 个 容器 ， 包 含 多 个 “状态 ”。 状 态 上 可 以 放置 元 件 。 一 个 状态 就 像 一 个 页 面 ， 多 个 “状态 ” 间 可 以 动态 切换 ， 就 能 实现 页 面 切 换 的 效 


果 。 动 态 面 板 是 最 党 用 、 最 便于 实现 交互 动画 的 元 件 。 


4.2.1 ”创建 动态 面板 


在 Axure RP 中 ， 可 以 直接 从 元 件 库 中 把 动态 面板 拖 外 到 画布 上 。 动 态 面 板 是 一 个 容器 ， 即 动态 面板 是 个 “ 空 讨 ”。 人 在 画布 上 ， 它 应 该 是 透明 的 。 但 
是 为 了 方便 找到 它 ，Axure RP 给 动态 面板 加 了 一 层 浅 监 色 遮 章 ， 如 图 4-32 所 示 。 


Deftault 


图 4-32 ”从 元 件 库 抑 惫 动态 面板 
除了 直接 拖 忠 ， 还 有 一 种 创建 动态 面板 的 方法 是 把 多 个 元 件 “ 转 换 为 动态 面板 ”。 
-如果 已 经 知道 动态 面板 应 该 做 成 多 大 尺寸 ， 可 以 直接 创建 动态 面板 。 
- 如 果 开 始 不 了 解 动态 面板 该 有 多 大 尺寸 ， 那 么 可 以 先 摆好 元 件 ， 再 把 摆好 的 元 件 转换 为 动态 面板 。 


全 选 元 件 ， 然 后 在 右键 快捷 菜单 中 选择 “转换 为 动态 面板 ”命令 ， 如 图 4-33 所 示 。 


转换 为 母 版 (MI 
转换 为 动态 面板 (D) 


图 4-33 ”将 元 件 转换 为 动态 面板 


“转换 为 动态 面板 ”其 实 自 动 干 了 两 件 事 : 
“ 一 是 创建 了 一 个 新 的 动态 面板 。 
“ 二 是 把 元 件 放 在 了 动态 面板 的 第 一 个 “状态 ”里 。 


例如 图 4-34 中 ， 和 矩形 元 件 转换 为 动态 面板 后 ， 被 放 在 了 动态 面板 的 状态 state1 中 。 


元 件 元 件 


|| index 
4 续 (动态 面板 ) 
转换 前 转换 后 


图 4-34 ”转换 后 ， 元 件 放 在 动态 面板 的 Statel 中 


“转换 为 动态 面板 ”操作 是 可 逆 的 。 “从 首 个 状态 中 脱离 ”命令 (如 图 4-35 所 示 ) 与 之 相反 ， 可 以 让 第 一 个 状态 中 所 有 元 件 从 动态 面板 中 脱离 ， 并 


删除 第 一 个 状态 。 如 果 动 态 面板 只 有 一 个 状态 ， 那 么 这 个 功能 会 将 动态 面板 删除 ， 将 状态 中 的 所 有 元 件 直 接 放 在 画布 上 。 


允许 触 皮 妃 标 交 互 


从 首 个 状态 中 脱 高 


组 合 (G) Ctrl+G 


图 4-35 “从 首 个 状态 中 脱离 ”命令 


4.2.2 动态 面板 的 状态 
动态 面板 是 一 个 容器 ， 包 含 多 个 “状态 ”。 每 个 状态 就 像 卡片 盒 里 的 一 张 卡片 。 盒 子 里 可 以 有 多 张 卡片 ， 但 只 有 最 顶层 的 卡片 可 以 被 看 到 。 
1 状态 的 基本 操作 


(1) 添加 状态 


在 状态 上 右 击 ， 在 弹出 的 快捷 荣 单 中 选择 “添加 状态 ”命令 (如 图 4-36 所 示 ) ， 可 以 添加 多 个 状态 ， 这 里 添加 了 3 个 状态 (State1、State2、 
State3) 。 


(2) 查看 状态 


双击 状态 名 称 ， 即 可 进入 “状态 页 面 ” 查 看 状态 。 开 始 的 每 个 状态 都 是 空 的 ， 像 其 他 页 面 一 样 ，“ 状 态 页 面 ”中 可 以 添加 元 件 。 例 如 ， 图 4-37 中 ， 
就 在 State1 页 面 中 添加 了 一 个 矩形 元 件 。 


[|| index 
用 坊 (相仿 面板 ) 
时 State1 


A Statez 
直 tate3 


复制 状态 


下 移 


图 4-36 ”添加 状态 


(动态 面板 ) 1 State1 |(index) 
a 154 


图 4-37 ”状态 页 面 


(3) 复制 状态 
“复制 状态 ”命令 会 生成 一 个 新 的 状态 ， 并 复制 原状 态 中 的 所 有 元 件 。 例 如 ， 图 4-38 中 ， 复 制 State1 会 生成 一 个 新 的 状态 State4。 而 且 ，State4 中 
已 经 包含 了 一 个 跟 State1 中 一 模 一 样 的 矩形 元 件 。 


(动态 面板 ) stated |(index) { 动 志 面 板 ) / State1 (index) index 
| | index 100 200 300 


4 志 (动态 面板) 


加 State 


首 画 State i 


4 
-: 


图 4-38 复制 状态 
2. 状 态 的 显示 特性 
动态 面板 同一 时 间 只 显示 最 上 层 的 状态 。 下 面 我 们 来 试 一 试 。 
(1) 将 State4 中 的 窍 形 元 件 上 的 文字 改 为 B。 回 到 index 页 面 ， 可 以 看 到 动态 面板 显示 的 是 State1， 如 图 4-39 所 示 。 


(2) 如 图 4-40 所 示 ， 调 整 动 态 面 板 的 状态 顺序 ， 现 在 是 State4 处 于 最 上 层 。 相 应 的 ， 画 布 上 动态 面板 显示 的 不 再 是 state1， 而 是 State4。 


| | index 

4 坟 (动态 面板 ) 
A Statel 
到 Jtated 
A State2 
A States 


图 4-39 ”画布 中 显示 Statel 


[上 index 
4 局 (动态 面板 ) 
A Stated 


到 State' 
直到 State2? 
一 State3 


图 4-40 ”画布 中 显示 的 是 State4 


提示 : 


起 
第 
国 
肖 
洁 | 
响 
计 


切换 动态 面板 的 状态 ， 就 能 改变 动态 面板 显示 的 页 面 。 利 用 这 个 特性 可 以 实现 很 多 交互 效果 。 例 如 文 的 案例 中 将 有 更 多 的 说 


明 。 


4.2.3 ”调整 动态 面板 的 尺寸 


动态 面板 像 一 个 窗口 ， 状 态 窗外 的 风景 。 动 态 面 板 的 尺寸 大 小 控制 着 状态 页 面 的 可 视 范 围 。 动 态 面板 越 大 ， 状 态 页 面 的 可 视 范 围 越 广 。 
1. 默 认 尺寸 


默认 情况 下 ， 动 态 面板 自动 调整 为 状态 页 面 的 大 小 ， 使 状态 页 面 完整 显示 。Axure RP 中 的 元 件 大 小 根据 内 容 自动 调整 时 ， 元 件 四 周 的 拖 岛 块 是 黄色 
的 ; 元 件 大 小 由 手动 调整 时 ， 四 周 的 拖 蝶 块 是 日 色 的 。 默 认 情 况 下 选中 动态 面板 后 如 图 4-41 所 示 。 


2. 手 动 调整 太 才 


手动 拖 忠 动态 面板 可 以 直接 改变 其 大 小 。 无 论 如 何 拖 拒 ， 状 态 页 面 的 左上 和 角 是 固定 的 。 动 态 面 板 尺寸 缩 小 之 后 ， 状 态 页 面 左 上 和 角 与 动态 页 面 左 上 角 对 
齐 ， 从 石 下 侧 开 始 隐藏 。 对 比 图 4-41 和 图 4-42 可 以 友 现 ,缩小 动态 面板 后 ， 状 态 页 面 只 能 看 见 其 左上 部 分 了 。 缩 小 前 文字 B 是 居中 的 ,缩小 可 视 范 围 
后 ，B 已 经 到 右 下 角 了 ， 如 图 4-42 所 示 。 


1) 


图 4-41 ”选中 动态 面板 后 的 效果 


图 4-42 ”画布 中 显示 State4 


进入 动态 面板 的 State4 的 状态 页 面 ， 如 图 4-43b 所 示 。 可 以 明显 看 到 和 矩形 的 大 小 没有 改变 ， 只 是 动态 面板 的 可 视 范 围 变 小 了 。 图 4-43b 中 的 蓝 色 虚线 
相当 于 动态 面板 的 边缘 ， 原 型 中 只 有 处 于 蓝 线 内 的 部 分 可 见 。 


a ) 随 内 容 大 小 目 动 调整 尺寸 b ) 手动 缩小 尺寸 


图 4-43 ”尺寸 提示 


3. 目 动 调整 尺寸 


手动 缩小 尺寸 后 ， 再 想 调 回 “ 近 内容 上 自动 调整 大 小 ”， 有 两 个 办 法 ， 一 是 鼠标 双击 元 件 四 周 的 拖 擅 块 ; 二 是 从 右键 快捷 菜单 中 选择 “自动 调整 为 内 容 
尺 二 ”命令 ， 如 图 4-44 所 示 。 


4.100% 宽 度 


动态 面板 还 有 个 特殊 功能 ， 即 “100% 宽 度 ”， 如 图 4-45 所 示 ， 可 以 让 动态 面板 的 宽度 与 展示 原型 的 浏览 器 宽度 相同 。 动 态 面 板 设 置 为 “100% 宽 
度 ” 之 后 ， 在 画布 上 不 会 立即 看 到 效果 ， 当 原型 展示 在 浏览 器 中 时 才能 看 到 效果 。 


目 动 风 警 为 内 容 斥 十 


座 动 条 
固定 到 浏 换 器 .… 


100% 宽 度 < 仅 限 浏览 器 中 有 效 > 


图 4-44 ”自动 调整 为 内 容 尺 二 
固定 到 训 贞 器.… 
100% 腕 度 < 仪 限 浏 史上 器 中 有 效 > 


爷 秆 甬 点 鼠标 父 互 


图 4-45 100% 宽 度 


4.2.4 拖 电 


动态 面板 是 唯一 可 以 响应 “ 拖 忠 ”操作 的 元 件 。APP 原 型 中 拖 蝶 操作 比较 多 ,例如 上 /下 翻 列表 、 左 滑 返 回 上 一 页 等 。 这 些 交 互 效果 只 能 由 动态 面板 
来 实现 。 


1. 拖 忠 相 关 的 触 友 事 件 


下 面 先 看 一 下 动态 面板 中 与 拖 蝶 操作 相关 的 解 友 事件 ， 如 图 4-46 所 示 。 


图 4-46 “与 拖 忆 相关 的 触发 事件 


Axure RP 把 “ 拖 岛 ”操作 的 整个 过 程 分 解 成 了 3 个 阶段 ， 每 个 阶段 对 应 一 个 触 友 事 件 。 


(1) 拖 动 开始 时 : 鼠标 按 下 的 瞬间 触 友 这 个 事件 。 如 果 拖 蝶 交 互 效 果 比 较 复 杂 ， 可 以 在 这 个 事件 中 处 理 一 些 准 备 工作 。 在 后 面 的 5.4.3 节 中 识别 手势 
的 算法 就 是 在 “ 拖 忠 开始 时 ”中 执行 的 。 


(2) 拖 动 时 : 鼠标 按 下 并 持续 按 住 时 ， 整 个 持续 时 间 段 内 会 不 断 触 友 这 个 事件 。 通 常用 来 实现 “鼠标 拖 忠 ， 元 件 随 之 移动 ”的 效果 。 例 如 上 下 拖 外 
列表 ， 拉 出 侧 边栏 等 。 


(3) 拖 动 结束 时 : 持续 按 住 鼠 标 一 段 时 间 后 ， 在 松 开 的 一 瞬间 会 触 友 这 个 事件 。 通 弟 用 来 实现 “ 松 开 鼠 标 ， 元 件 回 弹 ”的 效果 。 例 如 ， 下 拉 刷 新 、 
i0S 列 表 的 弹性 效果 等 。 


“ 拖 动 结束 时 ”还 有 两 个 特殊 的 变 体 。Axure RP 会 在 拖 动 结束 时 ， 自 动 识别 拖 忠 的 方向 。 根 据 拖 蝶 是 向 左 或 向 右 ， 进 一 步 分 出 两 个 事件 。 
` 向 左 拖 动 结束 时 : 按 住所 标 ， 向 左 拖 各 一 定 距离 然后 松 开 和 鼠标， 在 松 开 的 瞬间 触发 这 个 事件 。 
` 向 右 拖 动 结束 时 : 按 住 和 鼠标， 向 右 拖 慢 一 定 距 离 然 后 松 开 鼠 标 ， 在 松 开 的 皮 间 和 触发 这 个 事件 。 


无 论 拖 蝶 路 径 多 复杂 ， 都 会 触 友 “ 拖 动 结束 时 ”事件 。 但 只 有 水 平 向 左 / 右 拖 忠 才 会 触 友 “向 左 / 右 拖 动 结束 时 ”事件 。 这 两 个 事件 可 以 快速 实现 一 些 
简单 的 滑动 效果 。 例 如 ， 左 右 滑 切换 轮 播 图 等 。 


2. 举 例 讲解 拖 蝶 效果 的 实现 


“鼠标 一 边 拖 忠 ， 元 件 一 边 随 之 移动 ”是 最 常见 的 交互 效果 。 下 面 介绍 如 何 实现 这 个 效果 。 


如 图 4-47 所 示 ， 在 动态 面板 的 “ 拖 动 时 ”事件 中 添加 用 例 Case1， 然 后 添加 动作 “移动 ”。 选 择 “ 当 前 元 件 ” 为 要 移动 的 元 件 ， 移 动 方式 选择 “ 拖 
动 ”， 表 示 动 态 面板 跟随 鼠标 拖 折 而 移动 。 这 样 融 实 现 拖 擅 元 件 的 效果 了 。 


rp 用 例 编辑 < 拖 动 时 > 


用 例 名 称 “Case 1 添加 条 件 


添加 动作 组 织 动作 配置 动作 
》 链接 “| | 4 号 Case1 选择 要 移动 的 元 件 
4 元 件 及 移动 (动态 面板 ) 拖 动 ， sy 隐藏 未 命名 的 元 件 
This 拖 动 


4 “显示 /隐藏 也 | 当前 元 件 拖 动 


显示 
隐藏 
切换 可 见 性 
设置 面板 状态 
设置 文本 
设置 图 片 
》 设置 选中 
设置 列表 选中 项 
》 局 用 /禁用 
移动 
旋转 
设置 尺寸 
》 置 于 顶层 /底层 


二 
展开 / 折 近 树 节点 | 时间 |500 毫秒 


4 全 局 变 呈 
设置 变 音 值 


L 再 
图 4-47 添加 “移动 ”动作 
3 拖 灸 的 多 种 移动 方式 


除了 “ 拖 动 ”之 外 ，“ 移 动 ” 动 作 还 可 以 配置 其 他 移动 方式 。 而且， 在 “ 拖 动 开始 时 、 拖 动 时 、 拖 动 结束 时 ”等 事件 中 ， 可 以 选择 的 移动 方式 是 不 同 
的 。 


" 拖 动 开始 时 ”可 以 选择 “到 达 ”“ 经 过 ”， 如 图 4-48 所 示 。 两 种 方式 都 带 有 Xx、y 两 个 参数 ， 不 过 两 种 方式 下 ， 参 数 的 含义 不 同 。 


| 时 间 500 毫秒 


图 4-48 拖 动 开始 时 的 移动 方式 


“到 达 ” 方 式 下 ，x、y 表 示 “ 移 动 到 ”坐标 值 为 x、y 的 位 置 。 


经 过 方式 下 ，x、y 表 示 向 右 移动 x 像 素 ， 向 下 移动 像素 。X、y 为 负数 时 ， 向 反方 向 移动 。 


' 拖 动 时 ”可 以 选择 的 ， 除 了 “到 达 、 经 过 ”移动 方式 ， 还 有 “ 拖 动 、 水 平 拖 动 、 垂 直 拖 动 、 回 到 拖 动 前 位 置 ”移动 方式 ， 如 图 4-49 所 示 。 默 认 选 
择 “ 拖 动 ” 移 动 方式 。 


图 4-49 “到 达 、 经 过 ”移动 方式 


` 拖 动 : 要 移动 的 元 件 随 着 鼠标 光标 而 动 ， 光 标 走 过 多 少 距离 ， 元 件 就 走 多 少 距 离 。 


- 水 平 拖 动 : 要 移动 的 元 件 只 在 水 平方 向 上 随 着 光标 移动 。 


. 重 直 拖 动 : 要 移动 的 元 件 只 在 垂直 方向 上 随 着 光标 移动 。 
“ 拖 动 结束 时 ”与 “ 拖 动 时 ”″” 可 以 选择 的 移动 方式 一 样 。 默 认 选 择 “ 回 到 拖 动 前 位 置 ”。 


` 回 到 拖 动 前 位 置 : 元 件 移 回 按 下 鼠标 ， 拖 彼 开 始 的 瞬间 的 那个 位 置 。 


4.3 ” 单 用 交互 委 例 


一 :一 
人 


交互 动画 能 引起 用 户 的 注意 力 ， 帮 助 用 户 理解 。 交 互 设 计 是 产品 设计 的 一 个 重要 部 分 。 进 行 原型 设计 时 ， 应 当 给 重要 功能 设计 创新 的 交互 动画 。 其 他 
剃 规 页 面 的 交互 动画 可 以 直接 利用 本 书 提供 的 案例 或 通过 模板 复制 、 粘 贴 。 


学 习 下 面 这 些 案例 ， 可 以 练习 做 交互 动画 的 能 力 。 


4.3.1 案例 5: 轮 播 图 


轮 播 图 通常 放 在 页 面 项 部 最 显眼 的 位 置 。 如 图 4-50 束 是 本 案例 的 最 终 效果 。 


a ) 第 1 张 图 b ) 第 2 张 图 c ) 第 3 张 图 
图 4-50” 轮 播 图 


精心 设计 的 图 片 比 列表 更 美观 ， 转 化 率 更 高 。 所 以 当 内 容 比 较 多 时 ， 可 以 及 用 轮 播 图 的 形式 展示 精 选 内 容 。 另 外 ， 负 责 运 营 的 同事 常常 会 提 一 些 跟 产 
品 逻 辑 不 相关 的 运营 需求 ， 轮 播 图 也 可 以 承载 这 部 分 需求 。 


轮 播 图 有 多 种 样式 ， 最 常见 的 轮 播 图 可 以 自动 左右 切换 ， 可 以 点 选 切 换 到 任意 位 置 的 图 。 下 面 介 绍 如 何 用 Axure RP 实现 轮 播 图 。 
(1) 创建 动态 面板 ， 名 称 设 为 “ 轮 播 图 ”， 如 图 4-51 所 示 。 


(2) 在 动态 面板 中 添加 3 个 状态 ， 名 称 分 别 为 State1、Sstate2、state3。 在 每 个 状态 中 分 别 添加 一 张 不 同 的 图 片 ， 如 图 4-52 所 示 。 


index 术 视 ; 动态 面板 器 
0 100 | [200 300 


i i 4 es 3 ee | 轮 播 tu 
5 叶 6 人 遍 7 突 | 名 


a 
小 下 如 用 二 on 创建 连接 
置 ” 筷 标 单 击 时 


冤 ” 状 志 改 挛 时 
嘱 拖 动 开始 时 


螺 ” 拖 动 时 
蚀 ” 拖 动 结束 时 


Wl 


四 Index 
4 坊 (动态 面板 ) 


Bl Slate1 


图 4-51 设置 轮 播 图 名 称 
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概要 : 页 面 


| 二 量 轮 手 图 | 动态 面板 ) 
站 本 Statei 
dj 男 State2 
首 State3 


图 4-52 添加 状态 和 图 片 
(3) 给 轮 播 图 添加 “ 载 入 时 ”用 例 ， 如 图 4-53 所 示 。 添 加 动作 “设置 面板 状态 ” ， 来 实现 自动 轮 播 效果 。 


n 用 例 编辑 < 戟 入 时 > 
用 例 名 称 Case 1 | | 添加 条 件 
滔 加 动作 和 组织 动作 配置 动作 
| s 肉 接 | [a case1 | | 选择 要 设 理 状 寿 的 动态 面板 
4 元 件 | 设置 办 播 图 为 Next 向 左 滑动 out 500ms 向 | | | 若 此 部 | 病名 的 元 
| ey | , 左 滑动 n 500ms wrap 箱 环 人 间 阴 2000 束 秒 ee tt 
4 显示 / 隐 蕊 | deiay first change | 辐 当前 元 件 
| |“ 财 set 轮 播 图 (动态 面板 ) state to Next 向 左 油 动 ut 500ms 向 左 
隐 茂 | 
切换 可 见 性 
设置 面板 状态 
设置 次 本 
设置 图 片 
5 设置 选中 
设置 列表 选中 项 
5%， 居 用 / 蓉 用 
移动 
旋转 7 
设置 尺寸 赔 首 个 状态 延 时 2000 率 秒 后 切 挤 
” ， 置 于 顶层 浆 层 | | 
设置 千 透 明 进入 动画 向 在 滑动 时 间 5 毫 种 


获取 条 点 退出 动画 ”| 向 左 滑动 ~ 时间 |500 “这 秒 


二 | 


”»” 展开 / 析 要 树 节 点 
| 本 全 局 变量 
设置 变量 信 


同 如 果 隐 藏 则 显示 面板 


图 4-53 设置 自动 播放 效果 


(4) 新 建 3 个 小 圆 上 各 ， 并 转换 为 动态 面板 。 动 态 面 板 名 称 设置 为 “点 ”， 如 图 4-54 所 示 。 
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图 4-54 创建 动态 模板 “点 

: 选择 状态 : 可 以 选择 切换 到 某 个 特定 的 状态 ， 例 如 State1， 也 可 以 选择 相对 的 位 置 ， 例 如 Next (当前 状态 的 下 一 个 状态 ) 或 Previous (当前 状态 的 上 
一 个 状态 ) 。 本 例 要 实现 每 2 秒 切 换 到 下 一 个 状态 ， 所 以 这 里 选择 了 Next。 

` 循环 : “向 后 循环 ”的 含义 是 循环 到 最 后 一 个 状态 后 ， 再 从 第 一 个 状态 开始 不 断 循环 。 如 果 没 有 勾 选 “ 向 后 循环 ” 复 选 框 ， 只 勾 选 “ 循 环 间 隔 ” 复 
选 框 的 话 ， 循 环 到 最 后 一 个 状态 就 会 停止 循环 。 

` 循环 时 间 : 按 之 秒 进行 设置 。 通 常 一 个 动画 不 应 该 超过 2000 之 秒 ( 即 2 秒 ) 。 图 片 左右 滑动 、 窗 口 淡 入 和 淡出 等 ， 为 了 让 页 面 变化 更 自然 而 制作 的 
动画 ， 时 间 大 概 500 毫 秒 即 可 。 

` 动画: 前 文 介绍 过 显示 或 隐藏 的 动画 。 显 示 或 隐藏 只 需 设 置 一 次 动画 即 可 。 但 是 ， 动 态 面板 状态 切换 的 动画 是 一 个 状态 移 走 ， 另 一 个 状态 移入 ， 所 
以 要 设置 两 个 动画 。 


(5) 在 “点 ” 中， 复制 2 次 State1。 一 共 添 加 3 个 状态 ， 如 图 4-55 所 示 。 
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图 4-55 ”添加 状态 ， 并 改变 点 的 颜色 


“ Statel 中 第 1 个 点 设 为 蓝 色 ， 第 2 个 、 第 3 个 点 设 为 白色 。 


.State2 中 第 2 个 点 设 为 蓝 色 ， 第 1 个 、 第 3 个 点 设 为 白色 。 
.State3 中 第 3 个 点 设 为 蓝 色 ， 第 1 个 、 第 2 个 点 设 为 白色 。 
(6) 修改 轮 播 图 的 “ 载 入 时 ”用 例 。 让 “点 ” 跟 “ 轮 播 图 ”同步 循环 。 但 “点 ”不 用 设置 动画 ， 如 图 4-56 所 示 。 


rp 用 例 绽 辑 < 载 入 时 > 


用 例 名 称 Case 1 添加 条 件 
添加 动作 组 织 动 作 配置 动作 


A Case1l 选择 要 设置 状态 的 动态 面板 
元 件 及” 设 秆 轮 播 图 为 Next 向 左 滑动 out500ms 向， 营 埠 隐藏 未 命名 的 元 件 


左 滑动 in 500ms wrap 循环 间隔 2000 达 秒 
4 显示 /隐藏 delay first change， i 丰 ] 当前 元 件 


= 点 为 Nextw 司 隔 2000 毫秒 
ee nde Cy Set 点 {动态 面板 ) state to Next wrap 循环 间隔 2000 毫秒 dela 
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获取 焦点 画 时 间 500 
>》 展开 白蜡 树 站 襄 问 如 果 隐 藏 则 显示 面板 


全 局 变量 
ee 司 推动 拉动 元 件 


a [4 


图 4-56 ”点 与 轮 播 图 同步 循环 
提示 : 


为 什么 把 点 和 轮 播 图 分 成 两 个 动态 面板 呢 ? 因为 点 和 轮 播 图 的 动画 不 同 ， 轮 播 图 要 左右 滑动 ， 点 可 以 直接 切换 ， 所 以 需要 分 别 设置 两 者 的 动画 。 


4.3.2 ”案例 6: 切换 标签 页 


标签 栏 是 APP 常 用 的 页 面 形式 ， 如 图 4-57 所 示 。 
做 APP 原 型 一 般 都 会 用 到 标签 栏 。 通 常 标签 栏 可 以 有 3 ~ 5 个 标签 。 少 于 3 个 会 比较 空 ， 多 于 5 个 会 放 不 下 。 下 面 介 绍 实现 方法 。 
(1) 添加 4 个 和 矩形。 分 别 写 上 文字 ， 标 识 各 和 目 代表 什么 ， 如 图 4-58 所 示 。 


(2) 将 元 件 转换 为 动态 面板 ， 名 称 设置 为 “APP”。 复 制 两 次 状态 State1， 一 共 添 加 3 个 状态 。 将 3 个 状态 分 别 命名 为 “页 面 1、 页 面 2、 页 面 3”， 
如 图 4-59 所 示 。 再 把 页 面 2、 页 面 3 里 的 矩形 相应 改名 。 
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图 4-58 摆好 页 面 和 标签 
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概要 : 页 面 
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图 4-59 ”添加 状态 


(3) 在 页 面 1 的 标签 1 上 放 一 个 等 大 的 “ 热 区 ”元 件 。 在 热 区 的 “鼠标 单 击 时 ”中 添加 用 例 。 在 用 例 中 添加 动作 “设置 面板 状态 ”， 选 择 状态 “页 面 
， 如 图 4-60 所 示 。 


rp 用 例 编辑 < 鼠标 单 击 时 > 


用 例 名 称 Case 1 
添加 动作 
》 链接 a 
4 元 件 
4 显示 /隐藏 
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切换 可 见 性 
设置 面板 状态 
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设置 图 片 
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移动 
旋转 
设置 尺寸 
》 置 于 顶层 /底层 
设置 不 透明 
获取 焦点 
》 展开 / 折 委 树 节点 
4 全 局 变 呈 
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组 织 动作 
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更 设置 APP 为 页 面 1 


图 4-60 ”鼠标 单 击 用 例 
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同 如 果 隐 藏 则 显示 面板 

同 推动 /拉动 元 件 
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(4) 在 标签 2、 标 签 3 上 同样 添加 “ 热 区 ”。 然 后 在 热 区 上 设置 动作 。 最 后 ， 将 三 个 “ 热 区 ”复制 到 页 面 2、 页 面 3 中 ， 如 图 4-61 所 示 。 


APP /页 面 1 (index) x | APP /而 面 3 tindex) %* | APP /而 面 2 (index) % 
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图 4-61 复制 热 区 


检视 : 热 区 
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概 霍 : 页 面 
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4 属 APP ( 动 志 面 板 ) 
浊 国 页 面 1 
盐 本 页 面 2 
二 加 页 面 3 


(5) 最 后 的 效果 是 ， 在 原型 中 单 击 标签 1 区 域 ， 动 态 面板 跳 转 到 页 面 1; 单 击 标签 2 区 域 ， 跳 转 到 页 面 2; 单 击 标签 3 区 域 ， 跳 转 到 页 面 3。 


提示 : 


为 什么 把 动作 添加 在 热 区 上 ， 而 不 是 直接 设 在 标签 1 上 呢 ? 在 这 个 案例 中 ， 两 者 的 效果 是 一 样 的 。 但 是 如 果 标 签 1 不 只 是 一 个 矩形 ， 而 是 一 个 矩形 、 一 


段 文字 、 一 个 图 标 等 多 个 元 件 组 合 而 成 的 话 ， 用 热 区 来 控制 这 片区 域 的 单 击 动作 更 为 简洁 。 


4.3.3 ”案例 7: 侧 边 栏 


在 侧 边栏 这 种 交互 形式 刚 出 现 的 时 候 ， 大 家 都 党 得 这 种 交互 形式 新 奇 、 酷 炉 ， 于 是 都 一 宽 蜂 地 使 用 侧 边栏 ， 几 乎 每 个 APP 都 有 一 个 侧 边栏 ， 如 图 4- 
62 所 未。 
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图 4-62” 侧 边栏 


党 简洁 ， 但 另 一 方面 也 导致 被 隐藏 的 功能 使 


但 侧 边 栏 并 不 是 万 能 的 。 侧 边栏 平时 是 隐藏 起 来 的 ， 只 有 用 户 交 出 才 显示 出 来 。 这 个 特点 一 方面 让 APP 非 常 简 
用 率 降 低 。 乱 用 侧 边 栏 ， 效 果 肯 定 差强人意 。 


= 


慢 慢 地 APP 都 回归 到 适合 自己 的 交互 形式 ， 现 今 侧 边栏 反而 比较 少见 了 。 


要 正确 使 用 侧 边栏 ， 应 该 注意 以 下 几 点 : 
:低频 功能 适合 放 在 侧 边 栏 里 平时 被 隐藏 起 来 ， 以 突出 主要 功能 。 主 要 功能 应 该 放 在 顶部 或 底部 标签 中 ， 方 便 用 户 快速 切换 。 


* 标签 栏 只 能 放 3 一 5 个 按钮 。 更 复杂 的 目录 结构 适合 用 侧 边 栏 来 展示 ， 如 特别 长 的 目录 或 者 两 级 目录 。 


下 面 介绍 如 何 实现 侧 边栏 功能 。 


(1) 摆好 主页 面 ， 然 后 转换 为 动态 面板 。 将 动态 面板 命名 为 “主页 ”， 如 图 4-63 所 示 。 
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图 4-63 ”创建 “主页 ”面板 


(2) 在 主页 的 state1 中 摆好 侧 边 栏 ， 侧 边栏 宽度 控制 在 300， 然 后 转换 为 动态 面板 。 将 面板 改名 为 “ 侧 边 栏 ”， 如 图 4-64 所 示 。 在 右 下 角 的 元 件 地 


图 中 可 以 看 到 已 创建 的 两 级 动态 面板 。 


(动态 面板 ) / State1 (page1) paogel | 主 页 /State1 (index) x index ， 
0 1154 308 


图 4-64 创建 “ 侧 边 栏 ”面板 


检视 : 动态 面板 
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(3) 在 侧 边栏 的 “向 左 拖 动 结束 时 ”事件 中 添加 动作 “移动 ”， 如 图 4-65 所 示 。 选 择 侧 边 栏 为 要 移动 的 元 件 ， 移 动 方 式 为 到 达 位 置 (x=- 


300，y=0) 。 动 画 设置 为 “摇摆 ”。 


前 文 解 释 过 各 种 移动 方式 的 含义 。 本 例 中 移动 方式 是 “到 达 ” ， 坐 标 x 设 为 负数 的 侧 边栏 宽度 。 目 的 是 将 侧 边 栏 移 到 了 刚好 看 不 到 的 位 置 ， 实 现 侧 边栏 


收 起 的 效果 。 


pp 用 例 编辑 < 向 左 拖 动 结束 时 > 


用 例 名 称 Case 1 


添加 动作 组 织 动 作 
> 链接 | 14 西 case1 
4 元 件 于 移动 侧 边 栏 to (-300.0) 摇 捉 S00ms 
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显示 
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切换 可 见 性 
设置 面板 状态 
设置 文本 
设置 图 片 
设置 选中 
设置 列表 选中 项 
》 启用 / 荃 用 
移动 
旋转 
设置 尺寸 
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获取 焦点 
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图 4-65 添加 移动 动作 
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动 的 元 件 
昔 楷 隐 茂 未 命名 的 元 件 
加 当前 元 件 
4 加 | 主页 (动态 面板 ) 
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移动 到 达 ~ x |-300 |fx y: 0 fx 
动画 ， 摇 皖 v 时 间 ,500 ”毫秒 


界限 渗 加 边界 


下 面 介 绍 一 下 “动画 ”。 如 果 不 设置 动画 效果 的 话 ， 元 件 的 移动 是 瞬间 完成 的 。 设 置 了 动画 效果 ， 元 件 会 在 动画 效果 时 间 内 以 动画 方式 完成 移动 。 


Axure RP 中 的 动画 有 以 下 几 种 。 


` 摇摆 : 从 当前 位 置 到 目标 位 置 ， 沿 直线 运动 。 速 度 先 快 后 慢 。 接 近 终 点 时 可 以 感到 速度 减缓 。 

` 线性 : 直线 移动 ， 始 终 保持 匀速 。 

` 缓慢 进入 : 直线 移动 ， 速 度 先 慢 后 快 。 

` 缓慢 退出 : 直线 移动 ， 速 度 先 快 后 慢 。 与 摇摆 的 区 别 仅 仅 是 速度 不 同 ， 开 始 时 更 快 ， 接 近 终 点 时 更 慢 。 

. 缓 进 缓 出 : 直线 移动 ， 速 度 先 慢 后 快 ， 然 后 再 先 快 后 慢 。 就 像 开车 ， 先 起 步 加 速 ， 快 到 终点 时 闲 车 减速 。 
` 弹跳 : 在 到 达 目 标 位 置 时 ， 有 几 次 回 弹 ， 就 像 撞 到 了 地 面 的 效果 一 样 。 

` 弹性 : 在 到 达 目 标 位 置 后 ， 会 超出 目标 位 置 一 段 距 离 ， 然 后 被 拉 回 来 ， 就 像 拉 橡皮 筋 的 效果 一 样 。 


(4) 上 文 的 第 3 步 实 现 了 侧 边 栏 的 收 起 动画 。 下 面 用 类 似 的 方式 ， 实 现 侧 边栏 的 展开 动画 。 先 把 侧 边 栏 移 开 ， 在 主页 左上 角 的 按钮 上 添加 一 个 “ 热 
区 ”元 件 ， 如 图 4-66 所 示 。 


pAxure Master 
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图 4-66 ”添加 热 区 


(5) 给 热 区 “鼠标 单 击 时 ”添加 “移动 ”动作 ， 如 图 4-67 所 示 ， 动 作 配 置 与 第 3 步 基 本 一 样 。 移 动 到 坐标 (Xx=0，y=0) ， 让 侧 边栏 完全 显示 出 来 。 


(6) 调整 元 件 的 顺序 ， 将 侧 边 栏 置 于 顶层 ， 将 侧 边栏 移 回 原 位 。 


至 此 ,已 经 完成 了 侧 边栏 的 交互 效果 。 单 击 左 上 角 的 按钮 展开 侧 边 栏 ， 左 滑 后 收 起 侧 边 栏 。 一 般 ， 侧 边栏 还 可 以 通过 手势 右 滑 拉 出 ， 这 个 效果 要 息 


实现 呢 ? 请 各 位 读者 动 动脑 吧 。 


np 用 例 编辑 < 喜 标 单 击 时 > 


用 例 名 称 ,Case 2 


添加 动作 组 织 动 作 配置 动作 


b 链接 4 吕 Case2 选择 要 移动 的 元 件 
4 元 件 及 移动 侧 边栏 to (0.0) 摇摆 500ms 营 东 网 隐藏 未 命名 的 元 件 
4 显示 隐藏 加 当前 元 件 


显示 4 同 | 主页 (动态 面板 ) 


隐 蔚 4 加 例 边 栏 (动态 面板 ) to (0.0) 宜 择 500ms 
切换 可 见 性 


设置 面板 状态 
设置 文本 
设置 图 片 

》 设置 选中 
设置 列表 选中 项 

》 启用 / 蔡 用 
旋转 
设置 尺寸 

》 置 于 顶层 /底层 
设置 不 选 明 

》 展开/ 折 秋 树 节 点 =| 时 间 ,500 毫秒 

4 全 局 变 到 

设置 变 号 值 


移动 | 到 达 vi x: 0 fx y: 0 fx 


图 4-67 添加 移动 动作 


么 


4.3.4 案例 8: 通知 

前 面 的 案例 中 讲 过 “弹出 对 话 框 ”的 实现 方法 。 对 话 框 是 比较 “打扰 ”用 户 的 提示 方式 。 后 果 严 重 的 操作 ， 需 要 用 户 的 二 次 确认 。 这 种 情况 适合 弹出 
对 话 框 。 

对 于 一 般 性 的 通知 ， 例 如 用 户 操作 成 功 后 系统 的 反馈 消息 ， 可 以 用 弱 一 级 的 方式 提示 ， 如 一 条 2 秒 后 自己 消失 的 通知 . 

下 面 介 绍 如 何 实现 弹出 通知 面板 的 效果 。 


(1) 添加 3 个 算 形 一 背景、 按钮 、 通 知 ， 如 图 4-68 所 示 。 将 代表 “通知 ”的 算 形 元 件 转化 为 动态 面板 ， 并 将 动态 面板 改名 为 “通知 ”。 


(2) 将 “通知 ”面板 设 为 隐藏 。 


(3) 在 按钮 事件 中 添加 动作 “鼠标 单 击 时 ”， 如 图 4-69 所 示 。 添 加 了 3 个 动作 ， 分 别 为 显示 、 等 待 、 隐 藏 。 “隐藏 ” “显示 ”动作 已 经 介绍 过 ， 这 
里 不 再 袭 述 。 “等 待 ”动作 的 作用 是 让 “等 待 ” 乙 前 与 “等 待 ”之 后 的 动作 间隔 一 定时 间 再 执行 。 本 例 中 设置 等 待 时 间 为 2000 窜 秒 。 


至 此 已 经 实现 了 “通知 ”功能 。 最 终 效 果 是 单 击 按钮 时 ， 弹 出 “通知 ”面板 。 等 待 2 秒 ， 用 户 看 清 通知 上 的 文字 后 ，“ 通 知 ” 面 板 目 动 消失 。 


控 熏 


dG ES 
月 只 


图 片 已 悍 伍 


图 4-68 添加 元 件 


rp 用例 编辑 < 鼠标 单 击 时 > 


用 例 名 称 Case 1 
添加 动作 组 织 动作 配置 动作 
链接 4 只 Case1 以 毫秒 为 单位 输入 等 待 时 间 


元 件 多 ”显示 通知 逐渐 500 ms 等 待 时 间 2000 毫 种 


》 
1 
)》 全 局 变量 多 ”等待 2000 毫秒 

》 中 继 器 多 隐藏 通知 逐渐 500 ms 
4 上 只 他 

等 待 


图 4-69 添加 “鼠标 单 击 时 ”动作 


4.3.5 ”案例 9: 自动 弹出 键盘 

输入 密码 、 验 证 码 页 面 通常 形式 比较 简单 。 输 入 框 、 提 示 文 字 集 中 在 页 面 项 部 ， 页 面 空 日 比较 大 。 在 这 种 页 面 上 ， 最 好 在 进入 页 面 时 直接 将 焦点 放 在 
输入 框 中 ， 目 动弹 出 键盘 准备 输入 。 这 样 不 但 帮 用 户 节 省 了 一 次 单 击 ， 而 且 也 有 效 利用 了 页 面 空间 。 

下 面 介 绍 如 何 实现 这 个 效果 。 

(1) 添加 页 面 上 的 元 件 ， 如 图 4-70 所 示 。 将 文本 框 命名 为 “输入 了 昵称”。 (图 标 和 键盘 图 片 可 以 从 网 上 搜索 ， 或 直接 从 本 书 附带 的 模板 中 找 ) 


(2) 将 键盘 图 片 转换 为 动态 面板 ， 并 命名 为 “键盘 ”。 将 “键盘 ”面板 设 为 隐藏 ， 如 图 4-71 所 示 。 


文本 框 ( 输入 昵称 ) 


键盘 


图 4-70 添加 键盘 页 面 


0 154 308 


图 4-71 隐藏 键 诅 


(3) 单 击 画布 空 日 处 ， 在 页 面 的 触 友 事件 中 选择 “页 面 载 入 时 ”， 如 图 4- 72 所 示 。 


图 4-72 ”页 面 载 入 时 


(4) 给 “页 面 载 入 时 ”事件 添加 动作 ， 如 图 4-73 所 示 。 

本 例 中 添加 了 两 个 动作 。 

获取 焦点 : 选择 “输入 昵称 ”作为 要 获取 焦点 的 元 件 。 获 取 焦 点 后 ， 文 本 框 中 将 出 现 光标 。 
显示 : 选择 “键盘 ”作为 要 移动 的 元 件 。 为 了 模拟 键盘 弹出 的 效果 ， 增 加 了 “向 上 滑动 ”动画 。 


至 此 已 经 完成 了 “上 自动 弹出 键盘 ”的 效果 。 


np 用 例 饥 辑 < 页 面 戟 和 时 > 


用 例 名 称 Case 1 是 ae 
添加 动作 组 织 动作 


> 链接 “| | 4 Case1 选择 要 获取 焦点 的 元 件 
起 元 件 兴 ”设置 焦 点 在 辖 入 陀 称 查 直 名 | 隐藏 未 命名 的 元 件 


入 显示 键盘 向 上 滑动 500 ms | 同 键盘 (动态 面板 ) 


ene 财 输入 昵称 (文本 框 ) 
隐 蕊 


切换 可 见 性 
设置 面板 状态 
设置 文本 
设置 图 片 

bb 设置 选中 
设置 列表 选中 项 
bb 启用 /禁用 
移动 
旋转 
设置 尺寸 
kb 置 于 顶层/ 廊 层 
设置 不 透明 
获取 售 点 
> 展开 ! 折 肥 树 节点 
» 全 局 变量 
》 中 继 器 同 | 获取 焦点 时 选中 元 件 上 的 文本 


图 4-73 获取 焦 点 ， 显示 键盘 


下 面 是 一 些 复杂 的 案例 。 通 过 这 些 案例 的 学 习 ， 可 以 掌握 一 些 高 级 交互 动画 的 设置 技巧 ， 也 可 以 获取 交互 设计 方面 的 经 验 。 


4.4.1 案例 10: 优化 的 注册 流程 


注册 几乎 是 每 个 产品 都 有 的 功能 。 有 多 少 人 完成 注册 流程 ， 产 品 束 有 多 少 用 户 。 注 册 流 程 的 体验 关系 重大 ， 所 以 怎么 优化 都 不 过 分 。 
本 案例 的 最 终 效果 ， 如 图 4-74 所 示 。 


学 会 这 个 案例 ， 可 以 学 会 几 招 优化 交互 细节 的 方式 。 


1. 分 解 流程 


相信 大 家 都 不 愿意 填写 长 长 的 表单 ， 但 一 旦 开始 填写 ， 束 不 愿意 中 途 放 价 了 。 主 要 是 一 看 到 要 填写 长 长 的 表单 ， 付 出 这 么 多 时 间 成 本 ， 就 望而却步 
了 。 但 如 果 开 始 填写 了 ， 已 付出 了 努力 ， 中 途 放 痉 的 话 之 前 就 日 做 了 ， 因 此 宁愿 继续 下 去 。 


所 以 ， 在 设计 注册 流程 时 ， 应 该 让 每 一 步 都 特别 简单 ， 但 流程 可 以 拉 长 。 让 用 户 一 开始 容易 完成 ， 一 步 一 步 引 导 用 户 走 到 最 后 。 


欢迎 回来 ，Axure 大 师 ! 


0 


b ) 填写 昵称 C ) 欢迎 回来 
图 4-74 注册 流程 
假设 注册 分 为 5 个 步骤 开始、 账号、 密码 、 了 昵称 、 完 成 ， 具 体操 作 步骤 如 下 。 


(1) 添加 矩形 ， 作 为 育 景 。 添 加 动态 面板 并 命名 为 “注册 ”， 如 图 4-75 所 示 。 在 动态 面板 中 添加 5 个 状态 ， 分 别 命 名 为 “开始 、 账 号 、 密 码 、 昵 
称 、 完 成 ”。 


注册 /完成 (index) 注册 /昵称 (index) 注册 / 密码 (index) 注册 /账号 (index) 检视 : 动态 面板 
154 308 615 769 4 


[| index 
4 坟 注册 (动态 面板 ) 
4 于 开始 
账号 
密码 
昵称 
完成 


图 4-75 添加 动态 面板 和 状态 
(2) 在 “开始 ”状态 中 添加 一 个 按钮 ， 如 图 4-76 所 示 。 为 了 凸显 按钮 ， 可 以 给 按钮 添加 阴影 。 
提示 : 


在 编辑 状态 页 面 时 ， 和 常常 会 碰 到 元 件 为 白色 的 情况 。 状 态 页 面 的 背景 也 是 白色 ， 编 辑 元 件 时 很 不 方便 。 这 时 可 以 给 状态 页 面 添加 页 面 背景 颜色 ， 以 方 


便 操作 。 例 如 图 4-76 中 的 蓝 色 就 是 状态 页 面 的 背景 色 。 


(3) 在 账号 状态 中 添加 文字 、 水 平 线 、 箭 涉 、 和 矩形 背景 ,组 成 手机 号 填写 框 ， 如 图 4-77 所 示 。 


图 4-76 “开始 ” 状态 


1 /和 开 妈 (index) index 
160 


填写 手机 号 


图 4-77 账号 状态 
(4) 在 密码 和 了 昵称 状态 中 ， 用 类 似 的 元 件 摆 出 密码 、 了 昵称 填写 框 ， 如 图 4-78 所 示 。 


注册 / 密码 (index) Xx | 注册 /账号 (index) 关 | 注册 /开始 (index) | 注册 / 昵称 (index) 注册 / 密码 (index) 


* | 注册 /账号 (index) 
|o 本 人 二 


填写 昵称 


一 时 
于 
-一介 
于 

-有 

于 
| 
了 

: 荐 


图 4-78 ”密码 和 昵称 状态 


(5) 在 完成 状态 中 添加 文字 ， 提 示 用 户 已 经 完成 了 注册 流程 ， 如 图 4-79 所 示 。 


3 | 


| 


图 4-79 ”完成 状态 
(6) 在 各 个 状态 的 按钮 上 添加 “ 热 区 ”元 件 。 在 热 区 “鼠标 单 击 时 ”上 添加 动作 “设置 面板 状态 ”。 以 账号 状态 为 例 ， 
如 图 4-80 所 示 设 置 。 


注册 / 账号 (index) 
i 


和 二 添加 用 例 


4 天” 忌 标 单 击 时 

A 时 Case1 
著 设置 注册 为 Next 

“时 ”鼠标 移入 时 

“ 民 ”鼠标 移出 时 


图 4-80” 跳 到 下 一 步 


(7) 其 他 状态 与 此 类 似 ， 不 再 详 述 。 通 过 以 上 几 步 束 实 现 了 单 击 按钮 ， 动 态 面 板 跳 转 到 下 一 个 状态 ， 注 册 流 程 进入 下 一 步 。 


2. 转 场 动 画 


上 面 已 经 实现 了 注册 各 步 的 页 面 ， 但 还 不 是 一 个 流畅 的 流程 。 各 个 步骤 之 间 的 转换 比较 生硬 ， 缺 少 转 场 动 画 。 下 面 介绍 转 场 动画 的 实现 方法 。 


(1) 开始 状态 的 信息 量 不 多 ， 所 以 按钮 比较 小 。 有 的 用 户 账 号 比较 长 ， 所 以 账号 输入 框 需要 大 一 些 。 从 开始 状态 跳 转 到 账号 状态 ， 页 面 上 日 色 区 域 
的 变化 比较 突然 。 增 加 一 个 日 色 小 按钮 扩大 成 日 色 大 框 的 动画 会 让 跳 转 过 程 更 自然 ， 如 图 4-81 所 示 。 


a ) 开始 状态 


需 与 隆 


机 号 


b ) 账号 状态 


图 4-81 页 面 跳 转 


(2) 先 在 账号 状态 中 为 动画 做 好 准备 。 将 元 件 转换 为 动态 面板 ， 并 调整 到 动画 的 起 始 状态 ， 如 图 4-82 所 示 。 


注册 / 账号 (index) 


@@ 将 背景 框 转换 为 动态 面板 ， 命 名 为 “背景 


注册 /开始 (index) page1 注册 / 账号 (index) 
67 P33 200 


图 4-82 ”账号 状态 


提示 
第 人 
执 区 


框 ”， 并 缩小 到 与 开始 按钮 同样 的 大 小 。 动 画 会 将 背景 框 扩 大 到 原 尺寸 。 


@ 将 提示 转换 为 动态 面板 ， 命 名 为 “提示 ”， 并 设 为 隐藏 。 动 画 会 将 提示 设 为 显示 状态 。 


@ 与 提 


全 \ 


不 类 似 ， 将 箭头 转换 为 动态 面板 并 隐藏 。 


@ 将 水 平 线 转换 为 动态 面板 ， 命 名 为 “水 平 线 ”。 将 “水 平 线 ”缩小 到 1 像素 。 动 画 会 将 水 平 线 展开 到 原 长 度 ， 


(3) 在 开始 状态 的 开始 按钮 “鼠标 单 击 时 ”上 添加 动作 ， 如 图 4-83 所 示 。 


@ 设 置 “ 注 册 ” 面 板 状 态 (上 一 步 所 添加 ) 。 


@ 放 大 


F111=i 
月 宇 


框 用 “设置 尺寸 ”来 实现 。 选 择 


“背景 框 ” 为 要 调整 尺寸 的 元 件 ， 然 后 将 宽度 设 为 动态 面板 的 宽度 


背景 框 沿 中 心 线 向 两 边 扩 大 ， 所 以 锚 点 选择 “中 心 ”。 添 加 动画 “ 摇 扔 ”， 让 变化 更 流畅 。 


， 本 例 中 为 309。 高 度 保持 不 变 。 


引 


巾 


提示 : 


Axure RP 8.0 之 前 不 能 设置 锚 点 ， 只 能 默认 以 左上 角 为 锚 点 。 如 想 实 现 沿 中 心 线 向 两 边 扩大 的 效果 ， 需 要 两 个 动作 来 完成 ， 首 先 把 元 件 “ 移 动 ” 到 左 
侧 位置 ， 然 后 再 “设置 尺寸 ”。 


@@ 放 大 背景 框 乙 后 ，“ 逐 渐 ” 显 示 “ 提 示 ” 面 板 。 
@ 然 后 再 逐渐 显示 水 平 线 和 箭头 。 这 一 步 与 前 一 步 间 隔 200 昌 秒 ， 让 页 面 一 步 一 步 地 变化 ， 不 显 突 元 。 
@ 最 后 放大 水 平 线 。 将 水 平 线 恢复 为 原 大 小 。 随 着 水 平 线 的 延展 动画 ， 引 起 用 户 注意 ， 引 导 用 户 开 始 输入 。 


(4) 按照 类 似 的 方法 ， 在 密码 和 了 昵称 中 创建 动态 面板 。 在 切换 状态 动作 后 面 添加 类 似 的 动作 ， 给 整个 流程 中 的 各 个 步骤 都 添加 转 场 动 画 ， 如 图 4-84 
所 示 。 


组 织 动作 配置 功 作 


4 Case 1 选择 调整 尺寸 的 元 件 
侵 置 注册 为 Next 名 大 


Fr 设置 尺寸 于 背景 框 to 309 x 48 anchor 中 心 EE a 
树 反 500ms 六 二 [| 重头 (动态 面板 ) 


显示 提示 逐渐 500 ms 用 | | 水 平 线 (动态 面板 ) 
等 待 500 雍和 用 国 | 提示 (动态 面板 ) 


显示 水 平生 逐 剖 500 ms， 用 [了 | 背景 框 (动态 面板 ) to 309 x 48 anchor 中 心 摇摆 500m 
前 头 逐条 500 ms 

设置 尺寸 于 水 平 线 to 250 x 10 anchor 左上 

骨 摇 控 500ms 


隐 蕊 未 命名 的 元 件 


-| 时 间 500 


图 4-83 ”添加 动作 


概要 : 页 面 
[| page1 
4 易 注册 (动态 面板 ) 
二 国 开始 
二 加 账号 
> 箭头 (动态 面板 ) 
:> 水 平 绪 (动态 面板 ) 
提示 (动态 面板 ) 
背景 框 (动态 面板 ) 
好 
和 前头 2 (动态 面板 ) 
水 平 线 2 (动态 面板 ) 
提示 2 (动态 面板 ) 
背景 框 2 (动态 面板 ) 
昵称 
»” 志 ”前 头 3 (动态 面板 ) 
> 坟 水 平 线 3 (动态 面板 ) 
> 晶 提示 3 (动态 面板 ) 
曙 背景 框 3 (动态 面板 ) 


中 中 申 申 维 a 


加 加 加 加 


图 4-84 密码、 昵称 的 动态 面板 


3. 输 入 提示 


如 图 4-85 所 示 ， 左 边 用 大 字 提 示 比 较 醒 目 ， 可 以 引起 用 户 注意 ; 右边 用 小 字 可 以 随时 提示 ， 给 用 户 安全 感 ， 两 者 各 具 优 势 。 如 果 用 动画 串 起 来 ， 则 
两 者 可 以 兼 得 。 例 如 ， 进 入 页 面 后 开始 输入 前 ， 先 展示 大 字 ， 停 留 1 秒 左右 ， 待 用 户 看 清文 字 后 ， 大 字 移 向 左上 方 同 时 变 小 ， 最 终 将 停 在 输入 框 的 左上 
角 。 此 时 ， 用 户 可 以 在 水 平 线 上 方 输入 文字 。 


a ) 大 字 提 示 b ) 小 字 提 示 


图 4-85 ”提示 


下 面 介绍 具体 的 实现 万 法 。 


(1) 在 “提示 ”面板 中 添加 一 个 状态 State2， 如 图 4-86 所 示 。State1 中 放 “ 大 字 ”，State2 中 放 “ 小 字 ”。 


| | index 
4 者 注册 (动态 面板 ) 
4 国 开始 
站 国 账 握 
》” 需 箭头 (动态 面板 ) 
水 平 线 (动态 面板 ) 
4 二 提示 (动态 面板 ) 
A State1 


到 Statev 
昌吉 景 框 (动态 面板 ) 


图 4-86 添加 状态 


(2) Axure RP 中 只 有 “文本 框 ”元 件 可 以 输入 文字 。 所 以 ， 在 账号 状态 中 添加 一 个 文本 框 元 件 ， 并 命名 为 “输入 框 ”。 将 “输入 框 ” 移 到 背景 框 内 


水 平 线 上 方 ， 如 图 4-87 所 示 。 
. 将 “输入 框 ” 设 为 隐藏。 动画 会 将 文本 框 显 示 出 来 ， 并 设置 焦点 。 


: 由 于 之 前 已 经 用 短 形 和 平行 线 摆 出 了 一 个 假 的 文本 框 ， 有 了 边框 外 形 ， 所 以 这 里 将 “输入 框 ” 设 为 “隐藏 边框 。 


注册 /账号 (index) ”x 注册 1 开始 (Index) > | 提示 /State2 (index) x | 提示 1 State1 (index) index 
上 PE EE ee 1190 WE ) | |200 | 11 I300 |, i E ,la00 ,| i | 上 一 | 500 本 | l ei 


各 ” 剪 切 (T) 
复制 (C) 
粘贴 (P) 

粘贴 选项 


死 件 角 度 ”区 机 阴 麻 


Default 


村 过 
概要 : 页 面 
[0 index 
4 量 注册 (动态 面板 ) 
站 本 开始 
4 加 账号 
”者 苗头 (动态 面板) 
”者 水 平 线 ( 动 太 面板) 
ae 最 提示 (动态 面板 ) 
”》 量 背景 框 {动态 面板 ) 


图 4-87 添加 输入 框 


配置 动作 
选择 要 移动 的 元 件 
Ne Ea | 贺 隐藏 本命 名 的 元 件 
NE to 309 x 48 anchor 中 心 | 背 吕 框 3 (动态 面板 ，) = 
显示 提示 逐渐 500 ms 前 头 2 (动态 面板 ) 
等 待 500 毫秒 | 同 水 平 比 2 (动态 面板 ) 
尼 示 箭头 逐渐 500 ms， 回 提示 2 (动态 面板 ) 
a 背景 框 2 (动态 面板 ) 
设置 尺寸 于 水 平 线 t 250 x 10 anchor 左上 
骨 授 探 500ms 同 | 输入 框 (文本 框 ) 
专 待 1000 至 各 加 箭头 (动态 面板 ) 
显示 输入 框 | 加 水 平 线 (动态 面板 ) 
移动 提示 to (18,29) 所 所 500ms 提示 (动态 面板 ) to (18,29) 挥 把 500ms 
设置 提示 为 State2 背景 框 (动态 面板 ) 
等 待 500 毫 种 
设置 焦点 在 输入 框 


证 呈 果 本 刷机 恒 


移动 | 到 达 v xl1s fxyl2 fx 


动画 | 摇 提 -| 时 间 |500 。 | 毫 种 


界限 逐 加 边界 


图 4-88 添加 提示 动画 


@ 等 待 1000 毫 秒 ， 等 用 户 看 清 大 字 提 示 。 


@ 显 示 输 入 框 ， 准 备 让 用 户 输入 文字 。 
@@ 移 动 提示 到 背景 框 的 大 上 角 。 同 时 ， 立 即将 提示 改 为 State2， 即 改 为 小 字 。 
@ 等 待 500 毫 秒 ， 完 成 动画 移动 之 后 ， 将 焦点 设 在 输入 框 上 。 当 输入 框 中 光标 闪烁 时 ， 用 户 即 可 以 直接 输入 了 。 
(4) 与 此 类 似 ， 在 密码 、 了 昵称 中 也 添加 文本 框 元 件 ， 设 置 提示 的 两 个 状态 ， 如 图 4-89 所 示 。 

账号 状态 中 的 文本 框 可 以 选择 Phone Numbet 类 型 ， 让 用 户 只 能 输入 数字 。 

: 密码 状态 中 的 文本 框 可 以 选择 “密码 ”类 型 ， 让 用 户 只 能 看 到 ***。 


昵称 状态 中 的 文本 框 可 以 选择 Text 类 型 ， 不 做 限制 。 


Phone Number 


a ) 手机 号 文本 框 b ) 密码 文本 框 
图 4-89 不 同类 型 的 文本 框 设 置 
这 样 就 在 整个 流程 中 增加 了 输入 提示 动画 ， 
4 错误 提示 


在 用 户 输入 信息 后 还 应 及 时 给 用 户 反 馈 和 提示 。 如 果 用 户 输入 错误 ， 可 以 用 红色 提示 ， 


如 图 4-90b 所 示 。 同 时 也 可 以 增加 一 些 有 趣 的 动画 ， 不 但 可 以 引起 用 户 的 注意 ， 还 可 以 增加 趣味 性 。 例 如 ， 当 用 户 输入 错误 时 ， 输 入 框 将 左右 “ 近 


头 ”， 当 用 户 输 入 正确 时 ， 输 入 框 将 上 下 “点 头 ”。 


a ) 输入 正确 时 b ) 输入 错误 时 


图 4-90 ”用 户 输入 正确 、 错 误 时 


下 面 介绍 如 何 实现 上 述 的 效果 。 


(1) 在 “箭头 ”中 添加 两 个 状态 ,一 个 放 蓝 色 的 箭头 ,一 个 放 红 色 的 箭头 。 在 水 平 线 中 添加 两 个 状态 ， 一 个 放 监 色 的 线 ， 一 个 放 红 色 的 线 。 分 别 按 
颜色 将 状态 命名 为 blue 和 red， 如 图 4-91 所 示 。 


注册 (动态 面板 ) 

玛 开始 

下 己 

4 坟 箭头 (动态 面板 ) 


A blue 
A red 
4 曙 水 平 线 (动态 面板 ) 


赴 大 blue 


图 4-91 添加 状态 


(2) 在 “开始 ”按钮 上 添加 “点 涉 ” 动 作 ， 如 图 4-92 所 示 。 


Q@ 在 500 毫 秒 内 ， 让 “注册 ”面板 先 下 移 10 像 素 ， 再 上 移 10 像 素 。 动 画 分 别 选择 “缓慢 进入 ”和 “缓慢 退出 ”。 


@ 与 下 一 个 动作 之 间 间 隔 ?00 毫 秒 ， 在 “点 头 ”动画 完成 乙 后 再 执行 其 他 动作 。 


配置 动作 


选择 要 移动 的 元 件 
-ny ] 胸 秘 动 注册 by (0,10) 缀 惕 进 》 Ee | | 同 隐 芝 未 命 名 的 元 件 
后 头 动 作 \ 大 ”移动 注册 by (0,-10) 组 慢 退 出 200ms 世 注册 ( 动 赤 面板) by (0.10) 缓慢 进入 300ms = 
等 待 500 雍 秒 | weloome EF) :| 
下 一 步 | 及 设置 注册 为 Next 间 下 一步 3 热 区 ) 
证 本 背景 框 to 309 x 48 anchor 中 心 四 | 输入 框 3 (文本 杠 ) 
大 显示 提示 逐渐 500 ms 4 下 | 前 涉 3 (动态 面板 ) 
及 “等待 500 毫秒 4 加 | 水 平 线 3 (动态 面板 ) 
转 场 动 图 用 显示 季 关 逐渐 500 ms， 4 同 提示 3 (动态 面板 ) 
A 4 同 | 背景 框 3 动态 面板 ) 
[4 可 于 水 下 时 to 250 x 10 anchor 左上 则 下 一 步 2 ( 招 区 ) 
等 待 1000 毫秒 辣 输入 框 2 (文本 框 ) 
时 显示 输入 框 4 同 箭头 2 (动态 面板 ) 
: 对 移动 提示 to (18,29) 摇摆 500ms 4 同 | 水 平 线 2 (动态 面板 ) 
输入 提示 | 及 设置 提示 为 State2 4 辐 提示 2 (动态 面板 ) 


多 等 待 500 毫秒 4_ 世 | 起 号 柏 ? 15h 二 而 后 
多 ” 设 下 焦点 在 输入 杠 经 过 v x0 |fx y: 10 


动画 缓慢 进入 ”时间 ‘300 


界限 添加 边界 


图 4-92 ”添加 状态 
(3) 在 账号 状态 中 ， 给 热 区 添加 判断 条 件 ， 如 图 4-93 所 示 。 


“输入 框 ” 中 的 文字 长 度 等 于 11， 即 手机 号 有 11 位 的 时 候 ， 输 入 正确 ， 可 以 进入 下 一 步 。 


符合 全部。 ~ 以 下 条 件 ”| 清除 全 部 


描述 
上 时 元 件 关 字 长 雇 输入 柜 == "11" 


图 4-93 ”判断 手机 号 是 否 合法 


小 知识 : 


如 果 还 想 判 断 手 机 号 里 第 一 位 数字 是 否 是 1， 该 怎么 做 呢 ? 有 编程 基础 的 读者 ， 可 以 试 着 做 一 下 。 没 学 过 编程 的 读者 可 以 跳 过 这 一 


中 不 包含 这 个 条 件 ) 。 


在 条 件 中 选择 “ 值 ”， 然 后 单 击 仅 按钮 ， 如 图 4-94 所 示 。 


mp 条 件 设 立 


_ 描 染 - 


| if 元 件 文字 长 度 输 入 框 == "1 1 


and "[[t.text. ne = 
| 


图 4-94 选择 值 然后 单 击 你 控 人 钮 


在 这 个 页 面 中 添加 局 部 变量 t， 将 输入 框 对 象 放 在 t 中 。ttext 表 示 t 上 的 文字 。.chatAt (1) 是 一 个 字符 串 防 数 ， 表 示 取 字符 中 第 一 
述 ，t.text.charAt (1) 表示 输入 框 上 的 第 一 个 文字 。Axure RP 要 求 用 中 括号 “[[ “]] 括 起 来 的 才 是 变量 或 表达 式 。 


如 图 4-95 所 示 ， 判 断 [[t.text.charAt (1) 是 否 等 于 1， 就 相当 于 判断 手机 号 中 的 第 一 位 数字 是 否 是 1。 


[© 


综 上 所 


rp 编辑 文本 


任 下 方 编辑 区 输入 文本 ， 变 呈 名 称 或 表达 式 要 写 在 "[["]]" 中 ， 例 如 : 揪 信 变量 [[CnLoadvariable]] 返 回 值 为 变 
量 "OnLoadVariable" 的 当前 值 ; 插入 表达 式 [[VarA + VarB]] 返 回 值 为 "VarA + VarB" 的 和 ; 插入 [[PageName]] 返回 值 为 当前 页 面 名 


[[ttext.charAtf1)]] 


-局 部 变量 - 
在 下 方 创建 用 于 插入 fx 的 局 部 变量 ， 局 部 变量 名 称 必须 是 字母 、 数 字 , 不 允许 包含 空格 ， 


bs ”| | 答 和夫 


图 4-95 ”添加 局 部 变量 t 


(4) 与 “开始 ”按钮 类 似 ， 在 账号 状态 的 热 区 上 添加 “点 头 ”动作 ， 如 图 4-96 所 示 。 


组 织 动作 


下 十 Case 1 
(于 元 件 文 字 长 度 输入 框 == "11") 
移动 注册 by (0,10) 缓 惕 进入 300ms 
”性 | pp 多 移动 注册 by (0,-10) 缓慢 退出 200ms 


”等待 500 之 各 


设置 注册 为 密码 逐渐 out 500ms 逐渐 in 
5uUUms 


显示 提示 2 逐 淹 500 ms 
等 待 500 亭 秒 


显示 箭头 2 逐渐 500 ms， 
水 平 线 2 逐渐 500 ms 


误 置 尺寸 于 水 平 绪 2 to 250 x 10 anchor 五 
上 角 择 捍 500ms 


等 待 1000 之 秒 

时 水 输入 框 2 

移动 提示 2 to (18,29) 摇摆 500ms 
设置 提示 2 为 State2 

等 待 500 误 种 

设置 焦点 在 输入 框 2 


克 
乡 
多 
5 
4 
多 
多 
多 
多 
克 
克 
多 
多 


图 4-96” 添加“ 点头” 动作 


(5) 给 账号 状态 的 热 区 添加 第 二 个 用 例 ， 条 件 为 “输入 框 ” 中 的 文字 长 度 不 等 于 11。 然 后 给 用 例 添加 动作 ， 如 图 4-97 所 示 。 


4 “时 鼠标 单 击 时 


4 起 Wrong 


(f 元 件 文字 长 度 输入 框 = "11") 
及 移动 注册 by (10,0) 摇摆 50ms 

克 移动 注册 by (-20.0) 摇 择 100ms 

| 多 ”移动 注册 by (20,0) 摇摆 100ms 

摇头 动作 时 移动 注册 by (-20,0) 摇摆 100ms 
多 移动 注册 by (15,0) 摇摆 37ms 
时 移动 注册 by (-5,0) 弹性 25ms 
多 
4 


设置 水 平 线 为 red 
鲁 头 为 red 


设置 焦点 在 输入 框 


Case 1 
(Else lf 元 件 义 字 长 度 输 入 框 == "11") 


图 4-97 添加 “摇头 ”动作 


肌 置 为 销 误 5 考 态 


@ 添 加 “摇头 “动作 。 答 方法 就 是 好 方法 。 用 “移动 ”动作 控制 动态 面板 左右 移动 多 次 。 最 后 一 次 可 以 增加 “弹性 ”动画 ,让 “摇头 ”更 自然 。 
@ 把 “水 平 线 ” 和 “箭头 ”设置 为 代表 错误 的 状态 red。 
@ 完 成 上 述 动作 之 后 ， 焦 点 可 能 不 在 输入 框 上 了 。 最 后 重新 设置 一 下 焦点 即 可 。 


(6) 在 输入 框 的 “文本 改变 时 ”中 添加 用 例 。 当 用 户 修 改 文字 时 ， 将“ 水平线 ”和 “箭头 ”设置 为 正常 状态 blue， 如 图 4-98 所 示 。 


A Case' 


设置 箭 装 为 blue, 
水 平 绪 为 blue 


中 ”获取 焦点 时 
时 ”失去 焦点 时 


图 4-98 ” 当 用 户 修 改 文字 时 


(7) 按照 上 述 步 又 ， 在 密码 状态 中 也 进行 类 似 的 修改 。 可 以 将 密码 长 度 是 否 大 于 6 作为 密码 是 否 合 法 的 条 件 ， 如 图 4-99 所 示 。 


到 “二 鼠标 单 击 时 


> wrong 


(lf 元件 又 字 长 度 输入 框 2 < "6") 


5 本 Case1 
(Else 于 元 件 艾 字 ' 长 度 输入 框 2 >= "6") 


图 4-99 ”输入 密码 的 用 例 条 件 


这 样 就 在 整个 流程 中 增加 了 错误 提示 动画 。 


5. 进 度 条 


好 的 产品 不 会 让 用 户 “ 迷 路 ”。 注 册 流 程 应 该 随时 让 用 户 知 道 进行 到 了 哪 一 步 ， 还 有 多 少 步 要 完成 。 下 面 介 绍 如 何在 注册 流程 中 展示 完成 进度 。 


(1) 在 页 面 上 添加 一 个 矩形 元 件 ， 颜 色 与 背景 不 同 ， 大 小 与 背景 一 样 。 将 和 矩形 转换 为 动态 面板 ， 并 命名 为 “进度 ”。 调 整 “ 进 度 ” 面 板 的 层级 ， 高 
于 背景 矩形 ， 低 于 “注册 ”面板 ， 如 图 4-100 所 示 。 


index 注册 /账号 (index) 注册 /开始 (index) page2 注册 / 昵称 (index) 检视 : 动态 面板 
0 154 308 615 


鼠标 单 击 时 
状态 改变 时 
拖 动 开始 时 
拖 动 时 


拖 动 结束 时 
铅 磊 堪 z 疆 二 时 
概要 : 页 面 
上门 index 
4 强 注册 (动态 面板 ) 
A 
> 
"ee 
Es 
A 8 
4 芒 进度 (动态 面板 ) 
A mu State1 


图 4-100 “进度 面板 


(2) 把 “进度 ”面板 移动 到 页 面 左上 角 ， 与 背景 矩形 重合 。 然 后 将 “进度 ”面板 的 宽度 设 为 1。 后 面 将 用 交互 动画 ,让 用 户 每 完成 一 个 步骤 都 
将 “进度 ”宽度 增加 1/3。 用 户 完 成 3 步 之 后 ， 进 度 将 加 满 ， 如 图 4-101 所 示 。 


(3) 在 账号 状态 中 热 区 元 件 的 Case1 用 例 中 增加 一 个 动作 ， 如 图 4-102 所 示 。 


二 Case 1 

(Else lf 元 件 文字 长 度 输 入 框 == "11") 
， 移 动 注册 by (0,10) 缓慢 进入 300ms 
移动 注册 by (0,-10) 缓慢 退出 200ms 
等 待 500 毫秒 
设置 注册 为 密码 j 
SUUmS 


设置 尺寸 于 进 谋 to 120 x 616 anchor 左上 
角 摊 控 500ms 
显示 提示 2 逐渐 500 ms 


到 
多 
多 
用 
多 
中 
多 显示 箭头 2 逐渐 500 ms， 
少 
多 
乡 
三 
乡 
多 
LA 


FF oUt 500ms 衣 轩 in 


水 平 线 2 逐 汤 500 ms 
设置 尺寸 于 水 平和 线 2 to 250 x 10 anchor 左 
上 角 抒 摆 500ms 


等 待 1000 齐 秒 

显示 辆 入 恰 > 

移动 提示 2 to (18,29) 摇摆 500ms 
误 置 提示 2 为 State2 

等 待 500 毫秒 

设置 焦点 在 输入 框 2 


图 4-102 设置 增加 进度 


` 添加 在 切换 “注册 ”面板 状态 之 后 ， 在 进入 下 一 步 之 后 显示 进度 动画 。 


: 背景 矩形 的 宽度 为 360。 完 成 手机 号 填写 之 后 ， 进 度 前 进 1/3， 也 就 是 将 “进度 ”面板 的 宽度 增加 120 像 素 。 
. 锚 点 选择 在 左上 角 ， 让 “进度 ”面板 自 左 至 右 增加 。 


(4) 在 密码 、 了 昵称 状态 中 也 添加 类 似 的 动作 。 


这 样 束 完成 了 进度 条 动画 。 


4.4.2 案例 11: 锤子 开机 解锁 


锤子 系统 的 很 多 交互 动画 都 值得 学 习 ， 例 如 解锁 的 动画 就 相当 讲究 。 滑 开 屏 幕后 ， 桌 面 上 各 个 模块 纷纷 向 率直 屏幕 的 方向 弹性 颤动 ， 直 至 慢 慢 恢复 平 


给 了 暗示 。 


静 ， 如 图 4-103 所 示 。 不 但 给 人 很 强 的 视 完 震撼 ， 而 且 让 用 户 看 到 模块 是 活动 的 ， 对 “模块 可 以 拖 忠 ”的 功 


Play 商店 


a ) 解锁 后 富 动 动画 b ) 平静 状态 


图 4-103 ”解锁 后 的 桌面 动画 


案例 ， 可 以 增强 表达 复杂 交互 动画 的 能 力 。 下 面具 体 讲解 实现 方法 。 


学 会 这 个 


1. 滑 动 解锁 


(1) 用 和 矩形、 椭圆 形 、 截 图 扔 出 手机 外 框 ， 如 图 4-104 所 示 。 


(2) 在 手机 框 内 摆好 锁 屏 页 面 ， 再 将 其 转换 为 动态 面板 ， 命 名 为 “ 锁 屏 ”。 然后 再 把 “ 锁 屏 ”转换 为 动态 面板 ， 命 名 为 “屏幕 ”， 如 图 4-105 所 
示 。 这 一 步 相 当 于 给 锁 屏 页 面包 于 了 两 层 动 态 面板 外 这。 第 一 层 “ 锁 屏 ” 是 为 了 方便 整体 拖 忠 ， 第 二 层 是 为 了 容纳 “桌面 ”。 


(3) 在 屏幕 的 state1 中 ， 添 加 9 个 动态 面板 摆 成 九宫 格 。 在 每 个 动态 面板 中 设置 一 张 图 片 做 背景 ， 并 且 不 添加 其 他 元 件 。 然 后 将 图 片 调整 为 “ 适 
应 ”模式 ， 如 图 4-106 所 示 。 


图 4-104 ”手机 外 框 


锁 屏 /State1 (8.0) 屏 桂 1/ State1 (8.0) screen /lock (7.0) 8.0 
303 606 909 


属性 
= Default 


页 面 排列 


背景 颜色 


背景 图 片 


4 坟 屏 蔓 (动态 面板 ) 
A 本 State1 
4 锁 屏 (动态 面板 ) 
A ww State1 


图 4-105” 锁 屏 


日 房 /State1 (8.0) 鳞 屏 1/ State1 (8.0) 屏 医 1 State1 (8.0) screen /lock (7.0) 
600 800 


动态 面板 
背景 图 片 
概要 : 页 面 
[| 8.0 
4 者 屏 荣 (动态 面板 ) 
A ww State1 
算 形 》 者 ” 锁 屏 (动态 面板 ) 
4 用 日 历 (动态 面板 ) 
mm State1 
》 量 play 商店 (动态 面板 ) 
锁 屏 : 》 量 相机 (II 杰 耐 板 ) 
》 寺 图 库 (动态 面板 ) 
》 量 相册 (动态 面板 ) 
》 坟 优酷 (动态 面板 ) 
I 电子 邮件 1 动态 面板 
图 4-106 ” 摆 成 九宫 格 动态 面板 
提 不 :: 


为 什么 不 直接 复制 、 粘 贴图 片 ， 而 要 设 为 动态 面板 的 背景 呢 ? 因为 Axure RP 7.0 版 本 中 只 能 设置 动态 面板 的 尺寸 ， 不 能 直接 设置 图 片 的 尺寸 。 所 以 ， 
要 想 放大 或 缩小 图 片 ， 只 能 通过 这 样 “ 绕 弯 ” 的 方式 来 实现 。Axure RP 8.0 中 已 经 可 以 直接 设置 图 片 尺 寸 ， 不 需要 这 么 麻烦 了 。 


(4) 把 “ 锁 屏 ”面板 放 在 最 上 层 ， 苹 住 九宫 格 。 
(5) 在 “ 锁 屏 ”面板 “ 拖 动 时 ”上 添加 用 例 。 让 “ 锁 屏 ”面板 随 着 光标 在 垂直 方向 移动 ， 如 图 4- 107 所 示 。 


(6) 在 “ 锁 屏 ”面板 “ 拖 动 结束 时 ”上 添加 用 例 ， 如 图 4-108 所 示 。 让 “ 锁 屏 ”面板 在 松手 时 自动 上 滑 ，770 是 屏幕 的 高 度 。 当 “ 锁 屏 ”面板 滑 到 |- 
770 时 ， 正 好 看 不 到 “ 锁 屏 ”面板 ， 实 现 了 “请 动 解锁 ”的 效果 。 


多 动 This 垂直 拖 动 


图 4-107 ”垂直 拖 动 


4“ 居 邱 动 结束 时 


A Case1 


多 ”移动 This to (0,-770) 摇摆 
ouUUms 


图 4-108 ”放大 
(7) 滑动 解锁 效果 如 图 4-109 所 示 。 
2. 放 大 、 缩 小 模块 
模块 弹性 颤动 的 动画 可 以 用 Axure RP 中 的 “设置 尺寸 ”动作 实现 。 先 把 各 个 模块 放大 或 缩小 ， 然 后 再 把 各 个 模块 恢复 为 正常 大 小 ， 恢 复 过 程 使 


用 “弹性 ”动画 即 可 。 


Play 商店 


b ) 上 滑 


图 4-109 ”滑动 解锁 效果 


(1) 在 “ 锁 屏 ”面板 “ 拖 动 结束 时 ”用 例 中 添加 动作 ， 如 图 4-110 所 示 。 


组 织 动作 
避 所 Case1 
克 ”移动 This to (0,-770) 皖 把 500ms 
球 ， 设 午 尺 寸 于 日 历 to II159*1.3]] x [[203*1.3]] anchor 
右 下 骨 


play 商 店 to [[159*0.7]] x [[203*0.7J] ancher 底部 ， 
相机 to [[159*1.3]] x [[203*1.3]] anchor 左下 角 ， 
图 库 to [[159*0.7]] x [[203*0.7]] anchor 右 侧 ， 

相册 to [[159*1.3]] x [[203*1.3]] anchor 中 心 ， 

优酷 to [[159*0.7]] x [[203*0.7]] anchor 堪 侧 |， 

电子 邮件 to [[159*1.3]] x [[203*1.3]] anchor 右上 角 ， 
空格 1 to [[159*0.7]] x [[203*0.7]] anchor 顶部 ， 
空格 2 to [[159*1.3] x [[203*1.3]] anchor 左上 和 角 


设置 尺寸 于 日 历 to 159 x 203 anchor 右 下 角 弹性 
2000ms, 

play 商 店 to 159 x 203 anchor 底部 弹性 2000ms， 
相机 to 159 x 203 anchor 左下 角 弹性 2000ms， 
图 库 to 159 x 203 anchor 右 侧 弹性 2000ms， 
相册 to 159 x 203 anchor 中 心 弹性 2000ms， 
优酷 to 159 x 203 anchor 左 侧 | 弹性 2000ms， 


电子 邮件 to 159 x 203 anchor 右上 角 弹性 2000ms， 


字 格 1 to 159 x 203 anchor 顶部 弹性 2000ms， 
空格 2to 159 x 203 anchor 左 上 角 弹性 2000ms 


图 4-110 


` 设置 各 个 模块 的 初始 大 小 。 九 宫 格 中 9 个 模块 按 从 左 到 右 、 从 上 到 下 的 顺序 ， 间 隔 地 设 为 一 个 大 、 一 个 小 、 一 个 大 、 一 个 小 例如 ， 
块 日历 设 为 普通 状态 的 1.3 倍 大 小 。 第 2 个 模块 “Play 商 店 ” 设 为 普通 状态 的 0.7 倍 大 小 …… 设置 时 需要 注意 宽度 、 高 度 中 只 能 输入 数字 或 表达 式 。Axure 


中 ” 括 起 来 。 如 果 写 成 159*1.3， 不 带 中 括号 的 话 ，Axure RP 会 认为 这 是 一 串 文字 ， 不 是 数字 。 


RP 中 的 表达 式 必须 用 中 括号 “I 


` 根据 模块 的 位 置 设置 锚 点 。 锚 点 位 置 与 模块 在 九宫 格 中 所 处 位 置 相反 。 例 如 ， 九 宫 格 中 左上 角 的 模块 销 点 应 该 设 在 右 下 角 。 这 样 设置 可 以 让 所 有 模 


块 都 向 “外 ”扩展 ， 使 整个 页 面 更 规整 。 
: 不 设置 动画 。 让 模块 直接 变 到 动画 的 初始 状态 。 
(2) 设置 各 模块 的 弹性 动画 ， 如 图 4-111 所 示 。 
` 设置 各 模块 恢复 到 原 大 小 。 


` 锚 点 跟 上 一 步 保 持 一 致 。 只 


配置 动作 
选择 调整 尺寸 的 元 件 
Es 隐藏 未 命名 的 元 件 
辐 当前 元 件 
4 全 | 屏幕 (动态 面板 ) 
>” 加 | 锁 屏 (动态 面板 ) 

日 历 (动态 面板 ) to [[159*1.3]] x [[203”1.3]] anchor 右 下 角 
play 商 店 (动态 面板 ) to [[159*0.7]] x [[203*0.7]] ancher 底部 
相机 ( 动 专 面板 yto [[159*1.3]] x [[203*1.3]] anchor 左下 角 
贰 | 图 库 (动态 面板 ) to [[159*0.7]] x [[203*0.7]] anchor 右 侧 
相册 (动态 面板 ) to [[159*1.3]] x [[203*1.3]] anchor 中 心 
优酷 (动态 面板 ) to [[159*0.7]] x [[203*0.7]] anchor 左 侧 
电子 邮件 (动态 面板 } te [[159*1.3]] x [[203*1.3]] ancher 右上 角 
空格 1 (动态 面板 ) to [[159*0.7]] x [[203*0.7]] anchor 顶部 
空格 2 (动态 面板 ) to [[159*1.3]] x [[203*1.3]] anchor 左上 角 


[129- 1.3] 


[[203™1.3]] 


-| 时 间 1000 


设置 模块 初始 大 小 


第 1 个 杰 


锚 点 一 样 ， 尺 寸 变 化 之 后 ， 元 件 的 位 置 才 不 会 改变 。 


- 动画 设 为 “弹性 ”， 时 间 设 为 2 秒 或 更 短 。 从 以 往 的 经 验 看 ，2 秒 是 刚好 让 用 户 能 看 清楚 ， 但 不 会 感到 厌烦 的 时 间 。 


组 织 动作 配置 动作 

有 到 Casel 选择 调整 尺寸 的 元 件 
导 移动 This to (0,-770) 摇摆 500ms Es IV| 隐藏 未 命名 的 元 件 
5 dT 日 历 to [[159*1.3]] x [[203*1.3]] anchor 同 | 当前 元 件 


play 商 店 to [[159*0.7]] x [203*0.7]| anchor 底部 ， 4 古 | 屏幕 (动态 面板 ) 

相机 to [[159*1.3]] x [[203*1.3]] anchor 左下 骨 ， 

图 库 to [[159*0.7]] x [[203*0.7]] anchor 右 侧 ， > 锁 屏 (动态 面板 ) 

相册 to [[159*1.3]] x [[203*1.3]] anchor 中 心 ， i 本 

优酷 to [[159*0.7]] x [[203*0.7]] anchor 左 人 出 日 万 i) to 159x 203 anchor 下角 弹性 2000ms 
电子 邮件 to [[159*1.3] x [[203*1.3]] anchor 右上 角 ， play 商 店 (动态 面板 ) to 159 x 203 anchor 底部 弹性 2000ms 
空格 1 to [[159*0.7]] x [[203*0.7]] ancher 项 部 ， 

空格 2 to [[159*1.3]] x [[203*1.3]] anchor 左上 角 相机 (动态 面板 ) to 159 x 203 anchor 左下 角 弹性 2000ms 


和 于 日 历 to 159 x 203 anchor 右 下 角 弹性 图 库 (动态 面板 ) to 159 x 203 anchor 右 侧 | 弹性 2000ms 
play 商 店 to 159 x 203 ancher 底部 弹性 2000ms， 相册 (动态 面板 ) to 159 x 203 anchor 中 心 弹性 2000ms 

:3 0 > 0 2 ee 优酷 (动态 面板 ) to 159 x 203 ancher 左 人 出 弹性 2000ms 

2 ld 2 ee te 电子 邮件 (动态 面板 ) to 159 x 203 anchor 右上 角 弹性 2000ms 
电子 邮件 to 159 x 203 anchor 右上 角 弹性 2000ms， 至 格 1 (动态 面板 ) to 159 x 203 anchor 顶部 弹性 2000ms 


空格 1 to 159 x 203 anchor 顶部 弹性 2000ms， i Ee 
空格 2 to 159 x 203 anchor 左上 角 弹性 2000ms 空格 2 {动态 面板 ) to 159 x 203 anchor 左上 角 弹性 2000ms 


ww 


-| 时 间 2000 


图 4-111 设置 弹性 动画 
提示 : 


如 果 你 用 的 是 Axure RP 7.0 会 发 现 上 述 方法 行 不 通 。Axure RP 7.0 中 设置 尺寸 只 能 以 左上 角 为 锚 点 。 要 实现 上 述 效 果 ， 只 能 先 分 别 移动 模块 ， 再 放大 模 
块 ， 如 图 4-112 所 示 。 并 且 Axure RP 7.0 中 无 法 同时 移动 、 放 大 一 个 面板 。 所 以 ， 要 给 一 个 模块 建 两 个 模板 ， 即 一 个 移动 模板 ， 一 个 放大 模板 。 本 书 附带 的 
案例 源 文 件 中 有 Axure RP 7.0 的 案例 ， 感 兴趣 的 读者 可 以 参考 。 


移动 calmove to (0.0) 弹性 1000ms， 
playmove to ([[w/3]],0) 弹性 500ms， 
cammove to ([[w/3*2]],0) 弹性 1000ms， 
picmove to (0,[[H/3]]) 弹性 500ms， 
photomove to ([[w/31,[[H/ASTD) 弹性 1000ms， 
youkumove to ([[wi3*2]],[[H/3]]) 弹性 500ms， 
mailmove to (0,[[H/3*2]]) 弹性 1000ms， 


blank1move to ([[w/3]],[[Hi3*2]]) 弹性 500ms， 
blank2move to ([[w/3*2]],[[H/3*2]]) 弹性 1500ms 


设置 尺寸 于 calsize to [[W/3]] x [[H/31] anchor 左上 和 角 弹性 1000ms， 
playsize to 159 x 203 anchor 左上 和 角 弹性 500ms， 

camsize to 159 x 203 anchor 左上 角 弹性 1000ms， 

picsize to 159 x 203 anchor 左上 角 弹性 500ms， 

photosize to 159 x 203 anchor 左上 角 弹性 1000ms 


概要 : 页 面 


gd 二 screen (动态 面板 ) 
b> mm lock 
launcher 
ad 坊 calmove (动态 面板 ) 
看 State1 


4 过 ”calsize (动态 面板 ) 


State1 


二 才 playmove (动态 面板 ) 


直 Statel 
4 寺 playsize (动态 面板 ) 
mn State1 


图 4-112 ”Axure RP7.0 实现 动画 的 方法 


4.4.3 案例 12: 企业 网 站 

每 个 企业 都 有 一 个 企业 网 站 ， 或 介绍 产品 ， 或 介绍 本 企业 信息 。 时 至 今日 ， 搜 索 仍然 是 流量 的 最 大 入 口 。 企 业 网 站 是 搜索 转化 流程 的 最 后 一 个 节点 。 
企业 网 站 对 APP 下 载 量 的 直接 影响 可 能 不 大 ， 但 对 用 户 心 中 的 产品 形象 、 企 业 形 象 的 树立 可 能 起 到 至 关 重 要 的 作用 。 

下 面 以 第 2 章 中 的 案例 2 为 基础 ， 继 续 介绍 企业 网 站 常见 的 交互 设计 方法 。 
1. 动 态 标题 栏 


企业 网 站 顶部 冲 间 是 一 张 精 心 准备 的 大 图 ， 如 图 4-113 所 示 。 网 站 的 分 类 导航 以 图 为 背景 。 这 样 的 布局 很 有 冲击 力 ， 但 有 一 个 问题 ， 如 果 页 面 比较 
长 ， 页 面 往 下 浚 动 几 次 融 看 不 到 分 类 导航 了 。 


x ee 


3. | 127.0.0.1:327| 


大 师 模板 


可 能 是 东 半 球 最 全 、 最 好 用 的 Axure 模 极 


生 


图 4-113 ”顶部 分 类 寻 航 


解决 这 个 问题 的 方法 是 在 页 面向 下 滩 动 一 定 距离 后 ， 让 分 类 导航 以 标题 栏 的 形式 动态 出 现 ， 并 固定 在 屏幕 硕 部 ， 如 图 4-114 所 示 。 


x es 


127.0.0.1:327' 


图 4-114 ”动态 标题 栏 
下 面 介 绍 Axure RP 实现 动态 标题 栏 的 方法 。 
(1) 在 页 面 顶部 ， 用 矩形、 文字 等 元 件 摆好 标题 栏 。 然 后 将 这 些 元 件 转换 为 动态 面板 ， 并 命名 为 “标题 栏 ”， 如 图 4-115 所 示 。 


200 
人 大 师 模板 


图 4-115 ”动态 面板 


(2) 将 标题 栏 设 为 隐藏 。 后 面 会 通过 动画 来 控制 标题 栏 动态 显示 ， 如 图 4-116 所 示 。 
(3) 选择 “国定 到 浏览 器 ”选项 ， 让 面板 固定 在 页 面 顶部 。 
(4) 将 动态 面板 的 背景 设 为 白色 ， 选 择 “100% 宽 度 ” 选项。 让 标题 栏 横向 充满 屏幕 。 


(5) 在 页 面 的 “窗口 滚动 时 ”中 添加 两 个 用 例 ， 如 图 4-117 所 示 。Case1 处 理 页 面向 下 滚 ， 出 现 标 题 栏 的 情况 。Case2 处 理 页 面向 上 浴 ， 标 题 栏 隐 藏 
的 情况 。 


用， -一 一 
Me 


图 4-116 设置 标题 栏 


4 ”窗口 滚动 时 


A 二 Case 1 
(If "[[Window scrollY]]" > "200") 


多 ”显示 标题 栏 向 下 滑动 500 ms 


4 Case2 
(lf "[[Window.scrollY]]" <= "200") 


多 ”隐藏 标题 栏 向 上 滑动 500 ms 


图 4-117 添加 用 例 


(6) 设置 用 例 条 件 时 ， 使 用 了 一 个 系统 变量 [[window.scrollY]]， 如 图 4-118 所 示 。 它 代表 了 当前 窗口 在 垂直 方向 (y 轴 方向 ) 滚动 了 多 少 像素 。200 
是 分 类 导航 刚刚 在 页 面 上 消失 的 位 置 。 滚 动 距离 大 于 200 时 则 出 现 标题 栏 ， 小 于 200 时 则 标题 栏 隐藏 。 保 证 分 类 导航 和 标题 栏 不 同时 出 现 ， 让 过 渡 更 自 


ASN) 


符合 | 全 部 -| 以 下 条 件 。 | 清除 人 部 | 


描述 


(7) “显示 ”和 “隐藏 ”面板 已 经 使 用 过 多 遍 ， 这 里 束 不 多 解释 了 。 注 意 ，Case1 中 使 用 向 下 滑动 动画 ，Case2 使 用 向 上 滑动 动画 ， 如 图 4-119 所 
示 ， 让 标题 栏 从 上 部 出 来 ， 然 后 还 回 到 上 部 去 。 


组 织 动作 配置 动作 
4 case1 | 选择 要 隐藏 或 显示 的 元 件 
(lf "Window.scrolfY]] = "200") , 
时 时 示 标 题 栏 向 下 滑动 500 ms a | WH 隐藏 未 命名 的 元 件 
“| 4 园 标题 栏 (动态 面板 ) 显示 向 下 滑动 500 ms 
pp show more (动态 面板 ) 
pp show more (动态 面板 ) 
pp show more (动态 面板 ) 
4 show more (动态 面板 ) 
4 dot (动态 面板 ) 
上 | bk2 (动态 面板 ) 
bk3 (动态 面板 ) 
bk5 (动态 面板 ) 
bk4 (动态 面板 ) 
bk6 (动态 面板 ) 
bk (动态 面板 ) 


可 见 性 @ 显示 人 隐藏 〇 切换 
动画 | 向 下 滑动 ”| 时 间 ,500 训 秒 
置 于 项 层 

更 多 选项 无 


图 4-119 ”设置 动作 


网 站 与 APP 有 许多 不 同 的 操作 。 光 标 悬 停 就 是 网 站 中 特有 的 操作 之 一 。 通 常 ， 光 标 停 在 某 个 按钮 或 图 片上 ， 就 会 显示 相应 的 介绍 信息 。 这 是 一 个 非 当 
快捷 的 查看 详情 的 交互 。 


下 面 介绍 如 何在 Axure RP 中 实现 光标 悬 停 出 现 详 情 的 效果 。 


(1) 如 图 4-120 所 示 ， 企 业 网 站 中 “最 新 产品 ”模块 上 有 4 张 图 片 。 用 户 看 图 片 只 能 了 解 个 大 概 ， 需 要 看 到 更 多 介绍 来 了 解 详情 。 


A 
re 


1 C0 437 


NisduUrn Dyy Doesl 


- 马达 下 于 卡 于 政要 当 痢 下 记 要 人 

习作 未 友 上 更 大 新 尖 于 届 作 重音 如 于 
二 
唱 清 芝 - 四 池 。 注 个 计 部 


图 4-120 ”产品 介绍 
(2) 添加 文字 和 矩形 元 件 组 成 详情 介绍 模块 ， 并 将 其 转换 为 动态 面板 ， 命 名 为 “得 看 详情 ”。 再 添加 一 个 热 区 元 件 ， 如 图 4-121 所 示 。 
154 


最 新 产品 


热 区 
可 着 详 情 Flappy Bird 

Lorem ipsum dolor 

sit amet， 

consectetur 

adipiscing elit 

Aenean euismod 

bibendum laoreet. 

Proin gravida dolor 

sit amet lacus 就 是 你 的 大 地 


位 看 


图 4-121 详细 介绍 
(3) 将 “查看 详情 ”面板 设 为 隐藏 。 
(4) 把 “查看 详情 ”面板 和 热 区 移动 到 图 片上 ， 让 三 者 位 置 重合 。 


(5) 在 热 区 的 “鼠标 移入 时 ”事件 中 ， 双 击 用 例 Case 1， 在 弹出 的 “配置 动作 ”窗口 中 添加 “显示 ”动作 ， 如 图 4-122 所 示 。 光 标 移入 图 片区 域 
( 热 区 区 域 ) 后 显示 “查看 详情 ”面板 。“ 更 多 选项 ”设置 为 “弹出 效果 ” (前 文 介绍 过 弹出 效果 ， 类 似 弹出 菜单 。 光 标 离开 “弹出 ”元 件 的 区 域 后 ,元 
件 上 自动 隐藏 ) 。“ 弹 出 效果 ”可 以 实现 光标 移 走 后 “ 查 看 详情 ”立即 消失 的 效果 。 


配置 动作 
选择 要 隐藏 或 显示 的 元 件 


本 一 人 
三 了 7 上 


4 同 查看 更 多 (动态 面板 ) 
4 同 查看 更 多 (动态 面板 ) 
4 由 | 查看 更 多 (动态 面板 ) 
4 同 | 标题 栏 (动态 面板 ) 
4 [可 | 查看 更 多 (动态 面板 ) 显示 弹出 效果 
4 同 | dot (动态 面板 ) 
4 中 鼠标 移入 时 同 bk2 (动态 面板 ) 
A 总 Case1 同 bk3 (动态 面板 ) 
同 bk4 (动态 面板 ) 
同 bk6 (动态 面板 ) 
四 | bk (动态 面板 ) 


可 见 性 图 显示 〇 隐藏 〇 切换 
动画 v| 时 间 500 宇 秒 
辐 和 置 于 顶层 


更 多 选项 弹出 效果 ” 


图 4-122 ”弹出 效果 


民 ] 隐藏 未 命名 的 元 件 


(6) 复制 “查看 详情 ”面板 和 热 区 ， 粘 贴 到 其 他 3 个 图 片上 。 预 贞 原 型 时 光标 移 到 哪 张 图 片上 ， 融 显示 哪 张 图 片 的 详情 ， 如 图 4-123 所 示 。 


Xx 国 四 


| 127.0.0.1:32767/start.htmj#D= 网 站 &q=1&t 
@ 大 师 模板 


a 
级 新 Dea 品 


Flappy Bird 


Lorem ipsum dolor 
sit amet, 
consectetur 
adipiscing elit 
Aenean euismod 
bibendum laorest, 
Proin gravida dolor 
sit amet lacus 


图 4-123 预览 


网 页 间 的 跳 转 需要 读 取 时 间 。 同 一 个 页 面 内 的 跳 转 会 更 快捷 。 例 如 企业 网 站 中 ， 一 般 都 可 以 通过 单 击 目录 或 导航 上 的 模块 名 称 ， 跳 转 到 页 面 上 该 模块 


的 位 置 。 较 长 的 网 页 ， 通 常会 上“ 回 到 顶部 ”按钮 ， 单 击 该 按钮 即 可 回 到 页 面 项 部 。 


下 面 介绍 如 何 实现 同 页 内 定位 的 效果 。 本 例 中 ， 单 击 中 间 的 “了 解 更 多 ”按钮 ， 如 图 4-124 所 示 ， 页 面 即 跳 转 到 “产品 特点 ”模块 。 


bk] 


大 师 模板 


可 能 是 东 半 球 最 全 、 最 好 用 的 Axure 模 板 
: 


按钮 
bk2 一 人 
价格 透明 
图 4-124 “了解 更 多 ” 按 锂 
在 2.12 节 中 ， 添 加 了 动态 面板 bk1 作 为 轮 播 图 的 背景 ， 动 态 面板 bk2 作 为 产品 特点 部 分 的 背景 。 想 让 页 面 跳 转 到 产品 特点 模块 ， 就 是 让 页 面 跳 转 到 
bk2 的 位 置 。 


(1) 在 “了 解 更 多 ”按钮 上 “鼠标 单 击 时 ”中 添加 用 例 Case1， 如 图 4-125 所 示 。 


4 “时 鼠标 单 击 时 


A Case1l 


多 ”滚动 到 bk2 ( 仅 垂直 ) 摇摆 500ms 


图 4-125 添加 用 例 
(2) 在 case1 中 添加 动作 “ 深 动 到 元 件 ”， 如 图 4-126 所 示 。 这 个 动作 的 作用 是 把 页 面 滚动 到 选择 元 件 的 位 置 。 页 面 左上 角 与 元 件 左 上 角 对 齐 。 
` 配置 动作 时 选择 元 件 bk2。 
` 滚动 方式 选择 “ 仅 重 直 滚动 ， 让 页 面 仅 与 bk2 的 y 轴 坐标 对 齐 。 


。 “动画 ” 选择 “摇摆 ” 


np 用 例 编 辑 < 鼠 标 单 击 时 > 


用 例 名 称 |Case 1 
添加 动作 组 织 动作 配置 动作 


4 链接 A Case1 选择 元 件 
4 打开 链接 及 ”滚动 到 bk2 ( 仅 算 直 ) 摇摆 500ms 车 #f 隐藏 未 命名 的 元 件 
当前 窗口 
新 窗口 /新 标签 
弹出 窗口 
父 级 窗口 
关闭 窗口 
4 在 框架 中 打开 链接 
内 联 框架 
分 级 框架 
设置 自 适 应 视图 
>》 元 件 
全 局 变量 
》 中 继 器 
、 其 他 


当前 元 件 

查看 更 多 (动态 面板 ) 
查看 更 多 (动态 面板 ) 
查看 更 多 (动态 面板 ) 
标题 栏 (动态 面板 ) 
查看 更 多 (动态 面板 ) 
dot (动态 面板 ) 

bk2 (动态 面板 ) 

bk3 (动态 面板 ) 
bk5 (动态 面板 ) 
bk4 (动态 面板 ) 

bk6 (动态 面板 ) 

bk (动态 面板 ) 


国 国 国 国 国 | 周 国 国 国 国 国 国 国 


余 仅 垂 直 滚 动 
〇 仅 水 平 滚动 
〇 水 平和 垂直 滚动 


| 时 间 ,500 毫秒 


图 4-126 添加 “滚动 到 元 件 ” 动 作 


这 样 就 实现 了 同 页 内 定位 的 效果 。 


第 5 草 ”数据 操作 


在 Axure RP 中 ， 可 以 很 方便 地 设置 常用 的 交互 动画 。 有 了 交互 动画 ， 原 型 就 可 以 “ 动 ， 起 来 了 ， 但 原型 里 的 数据 并 不 会 真正 发 生变 化 。 本 章 将 介绍 如 
何 通过 设置 变量 、 函 数 和 中 继 器 ， 来 控制 和 修改 原型 中 的 数据 。 


ZULIN 


变量 是 Axure RP 中 存储 数据 的 抽象 概念 。 可 以 通过 采用 变量 名 称 来 引用 变量 ,使 用 变量 中 存储 的 数据 。Axure RP 中 元 件 的 位 置 、 宽 度 等 元 件数 据 是 
变量 ， 页 面 的 名 称 、 窗 口 大 小 等 系统 数据 也 是 变量 。 用 户 还 可 以 输入 数据 并 定义 变量 。 


5.1.1 使 用 变量 
变量 主要 应 用 于 动作 和 条 件 的 设置 中 。 在 配置 动作 时 ， 通 常 可 以 直接 输入 数值 来 修改 参数 、 改 变 特定 的 变量 。 例 如 ， 配 置 “移动 ”动作 时 ， 可 以 直接 
输入 数字 ， 来 改变 元 件 的 位 置 ; 配置 “设置 文本 "动作 时 ， 可 以 直接 输入 文字 ， 来 改变 元 件 上 的 文本 。 


但 在 有 些 时 候 ， 直 接 输 入 数值 并 不 能 满足 需求 。 例 如 ， 希 望 把 元 件 移动 到 另 一 个 元 件 底 部 ;或 希望 将 “和 矩形 ”上 的 文字 设 为 “输入 框 ” 里 的 文字 。 无 
论 是 获得 元 件 底部 的 坐标 值 ， 还 是 获得 “输入 框 ” 里 的 文字 ， 都 需要 使 用 变量 。 


使 用 变量 融 需 要 用 到 fx 按钮 功能 。 


(1) 在 配置 动作 界面 、 设 置 条 件 界 面 等 许多 需要 输入 “ 值 ”的 界面 都 可 以 看 到 fx 按钮 ， 如 图 ?5-1 所 示 。 


图 降 臣 未 命名 的 元 件 符合 | 全 部 “| 以 下 条 件 


图 5-1 位 按钮 
(2) 单 击 fx 按 钮 ， 进 入 “编辑 文本 ”对 话 框 ， 如 图 5-2 所 示 。 
.第 1 个 输入 框 中 可 以 播 入 变量 或 包含 变量 的 表达 式 。 


:第 2 个 输入 框 中 可 以 添加 局 部 变量 ， 后 文 会 有 详细 介绍 。 


变量 名 或 包含 变量 名 的 表达 式 ， 必 须 写 在 括号 “[ 四 ”内 。 括 号 外 的 表达 式 都 会 被 当成 普通 文字 。 


在 下 方 编辑 区 输入 文本 , 变量 名 称 或 表达 式 要 写 在 "[[""]]" 中 。 例 如 : 插入 变量 [[OnLoadVariable]] 返 回 值 为 变 
量 "OnLoadVariable" 的 当前 值 ; 插入 表达 式 [[VarA + VarB]] 返 回 值 为 "VarA + VarB" 的 和 ; 插入 [[PageName]] 返回 值 为 当前 页 面 名 


称 。 


ZE 起 -ey 


在 下 方 创建 用 于 插入 f 的 局 部 变量 ， 局 部 变量 名 称 必须 是 字母 、 数 字 , 不 允许 包含 空格 。 


L=) 


图 5-2 “编辑 文本 ”对 话 框 


(3) 单 击 “ 插 入 变量 或 函数 ”按钮 ， 会 弹出 如 图 ?-3 所 示 的 菜单 。 其 中 包含 了 Axure RP 中 所 有 种 类 的 变量 和 子 数 ， 


Ea 目 于 二 


Numper 
子 侍 定 
数学 
其 
布尔 


图 5-3 所 有 的 变量 
下 面具 体 介绍 Axure RP 中 的 每 种 变量 和 了 数 。 


通常 ， 全 局 变量 是 用 来 临时 存储 数据 的 。 使 用 全 局 变量 前 ， 需 要 先 创建 全 局 变量 


1. 案 例 说 明 


， 创 建 后 ， 即 可 将 要 存储 的 数据 赋值 给 全 局 变量 。 


K+ 
| 


下 面 通过 一 个 案例 ， 来 说 明 全 局 变量 的 用 法 。 


在 图 5-4 所 示 的 原型 中 ， 用 户 先 在 搜索 框 中 输入 xxx， 单 击 “ 搜 索 ， 按 钮 后 ， 下 面 的 文字 元 件 显示 结果 提示 “ 找 不 到 xxx”。 这 个 过 程 需 要 用 全 局 变 
来 仓储 用 户 输 入 的 文字 。 


实现 思路 是 : 将 “搜索 框 ” 元 件 上 的 文字 内 容 传 给 全 局 变量 ， 再 将 全 局 变量 的 数据 加 工 后 传 给 “文字 提示 ”元 件 。 


图 5-4 ”搜索 


2. 设 置 全 局 变量 的 值 


(1) 在 “搜索 ”按钮 的 “鼠标 单 击 时 ”事件 中 添加 动作 一 一 设置 变量 值 ， 如 图 5-5 所 示 。 


用 例 编辑 < 贸 标 单 击 时 > 


用 例 名 称 case 1 
添加 动作 配置 动作 


》 链接 选择 要 设置 的 全 局 变量 


设置 变 晤 值 
》 中 继 器 
》 其 他 


提示 : 


图 5-5 中 可 以 看 到 已 经 有 一 个 变量 OhLoadVatiable， 这 个 变量 是 系统 自动 创建 的 。 


(2) 单 击 右上 角 的 “添加 全 局 变量 ”按钮 ， 进 入 “全 局 变量 ”对 话 框 。 在 其 中 添加 一 个 变量 input， 如 图 5-6 所 示 。 


| ` 安 明 | 
. 单 击 绿 色 加 号 ， 可 以 添加 新 的 变量 。 
` 单 击 红色 又 号 ， 可 以 删除 变量 。 
. 单 击 蓝 色 箭头 ， 可 以 调整 顺序 。 
提示 : 
输入 新 变量 名 称 时 需要 注意 字数 限制 ， 而 且 只 能 输入 英文 字母 或 数字 。 如 图 5-6a 所 示 ， 输入 中 文 是 不 允许 的 。 


| 民 全 出 侨 旱 j 芭 全 局 任 旦 


创建 全 局 变量 用 于 浏览 器 中 页 面 切换 时 存储 数据 。 如 果 在 IE 浏览 器 浏览 原型 , 推荐 使 
用 25 个 或 更 少 的 变量 。 


变量 名 必须 是 字母 数字 ， 少 于 25 个 字符 ， 并 且 不 能 包含 空格 。 


创建 全 局 变量 用 于 浏览 器 中 页 面 切 换 时 存储 数据 。 如 果 在 IE 浏览 器 浏览 原型 , 推荐 使 
用 25 个 或 更 少 的 变量 。 


变量 名 必须 是 字母 数字 ， 少 于 25 个 字符 ， 并 且 不 能 包含 空格 。 


中 六 x 
变 呈 名 称 默认 值 
OnLoadVariable 


用 户 输 入 本 2 4 


变 呈 名 称 默认 值 
OnLoadVvariable 


a ) 不 能 输入 中 文 b ) 可 以 输入 英文 
图 5-6 ”添加 全 局 变量 


(3) 单 击 “ 确 定 ”按钮 ， 进 入 “配置 动作 ”窗口 。 在 其 中 选中 input， 设 置 input 值 为 “搜索 框 ” 元 件 上 的 文字 ， 如 图 5-7 所 示 。 


配置 动作 
选择 要 设置 的 全 局 变量 


厂 | OnLoadyvariable 
input to 广 字 于 This 


设置 全 局 变量 值 为 : 


元 件 文字 , 


图 5-7 ”配置 动作 
3. 使 用 全 局 变量 


(1) 打开 添加 动作 界面 ， 添 加 动作 一 一 设置 文本 ， 如 图 ?-8 所 示 。 设 置 “ 搜 索 结 果 ” (文字 元 件 ) 的 “ 值 ”为 “ 找 不 到 [[input]]”， 其 中 ，“ 找 不 


到 ”是 一 段 文 字 ，“[[input]]” 是 变量 。 


组 织 动 作 配置 动作 
二 届 Case1 选择 要 设置 区 本 的 元 件 


硅 设置 坟 于 input = 立 宇 于 搜索 框 本 起 可 | 陷 专 未 语 名 的 元 件 
学 ”设置 文 宇 于 博 素 结果 =" 找 不 弛 impug 


由 | 当前 元 件 

辣 | 焦点 元 忻 

| 后 搜索 结果 (矩形 ) lo" 浅 不 到 [linput 玉 
中 | 搜索 框 (区 本 民 ) 


显示 
跟 客 
切换 可 见 性 
设置 面 宫 杖 坊 
设置 图 片 
， 设 置 选 中 
误 置 列表 选中 项 
” 局 用 / 楚 用 
移动 
旋转 
设置 尺寸 
Fr 置 于 顶层 / 悦 屋 
设置 趟 渤 明 
获 职 你 点 
5 展开 / 析 蝇 树 节点 


J 全 局 变量 = | 技 王 引 iinpu 和 


设置 变量 全 


图 5-8 设置 文本 


(2) 预览 原型 ， 可 以 在 浏览 器 中 查看 原型 的 效果 。 在 输入 框 中 输入 “王者 荣耀 ， 单 击 “搜索 ” 按钮， 会 出 现 文字 提示 结果 “ 找 不 到 王者 荣耀 
如 图 5-9 所 示 。“ 王 者 荣 泪 ”四 个 字 通 过 全 局 变量 ， 从 输入 框 传 给 了 文字 提示 元 件 。 


E 少 床 稚 


图 5- 9 原型 预览 1 大 


4. 全 局 变量 的 生命 周期 


全 局 变量 这 个 名 称 翻 译 是 不 准确 的 ， 因 为 它 并 不 存在 于 “全 局 ”。 全 局 变量 只 在 当前 页 面 有 效 ， 当 跳 转 到 其 他 页 面 或 者 页 面 刷新 之 后 ， 全 局 变量 就 会 


N= J5 己 | 
7 月 众 。 


只 有 一 种 情况 例外 ， 如 图 5-10 所 示 。 打 开 和 链接 动作 有 一 个 特殊 的 配置 选项 一 一 “重新 加 载 当前 页 面 < 变量 修改 有 效 >”。 选 择 这 个 选项 刷新 页 面 后 ， 
页 面 中 的 变量 将 保持 当时 的 值 不 变 


添加 动作 
二 肉 接 
二 打开 链接 
当前 窗口 
新 军 口 /新 标 莹 
弹出 窗口 
党 级 窗口 
关闭 窗口 
二 ”在 框架 中 打开 狂 捷 


组 织 动 作 


| | 丁丁 Case1i 
§ 在 当前 窗口 打开 链 控 


配置 动作 


打开 位 加 | 当前 窗口 
入 链接 到 当前 项 目的 某 个 页 面 


DD pagel 
[一 g 这 
0 Page3 


内 联 框 加 
父 级 框 存 
滚动 到 元 件 < 锚 链接 > 
设置 自 适应 视图 
元 性 
二 显 击 陷 乃 
显示 
除 看 
切换 可 见 性 门 ) 链接 到 ur| 或 交尾 
设置 面板 忧 态 超 链接 
设置 文本 
讼 置 图 此 门 ) 重新 加 载 当前 页 面 < 变量 修改 有 效 > 


设置 选中 z 站 返回 上 一 页 < 变量 修改 无 效 -> 


图 5-10 “重新 加 载 当 前 页 面 < 变量 修改 有 效 > ”选项 


5.1.3 ”元件 变量 
元 件 变量 分 为 两 类 : 代表 “ 某 个 元 件 ” 的 变量 、 代 表 元 件 某 个 “属性 ”的 变量 。 
1. 元 件 本 身 也 是 变量 


元 件 本 身 也 是 一 个 变量 。 如 图 5-11 所 示 ，This 和 Target 束 代表 元 件 。This 代 表 当 前 元 件 ，Target 代 表 目 标 元件 。 例 如 ， 用 例 是 单 击 A 移 动 B， 那 么 A 就 
是 当前 元 件 ，B 束 是 目标 元 件 。 


hy hy 
辆 编辑 文本 


在 下 方 编辑 区 输入 文本 , 变量 名 称 或 表达 式 要 写 在 "[["]]" 中 。 例 如 : 插入 变量 [[OnLoadVariable]] 返 回信 为 变 
量 "OnLoadVariable" 的 当前 值 ; 插入 表达 式 [[VarA + VarB]] 返 回 值 为 "VarA + VarB" 的 和 ; 插入 [[PageName]] 返回 值 为 当前 页 面 名 
称 。 


必须 是 字母 、 数 字 , 不 允许 包含 空格 。 


Width 
height 


scrollX 
scrollY 
text 
name 
top 

left 


图 5-11 元 件 


举 个 具体 的 例子 : 


(1) 在 原型 中 添加 4 个 矩形 ， 分 别 命名 为 1、2、3、4， 如 图 5-12 所 示 。 


中 逐 加 用 例 


鼠标 单 击 时 
鼠标 移入 时 
鼠标 移出 时 


更 多 事件 >>> 


图 5-12 ”4 个 短 形 
(2) 在 和 矩形 1“ 鼠 标 单 击 时 ”事件 中 添加 动作 “设置 文本 ”。 将 4 个 窍 形 元 件 的 文字 “ 值 ” 依 次 设 为 [[This.name]l] 和 [[target.name]]。 
` 其 中 ，“.name” 代 表 元 件 的 名 称 。 
. 由 于 是 在 适 形 1 中 添加 的 动作 ， 所 以 This 永 远 代表 矩形 1。 
: 给 矩形 2 添加 动作 时 ，target 代 表 短 形 2; 给 答 形 4 添加 动作 时 ，tatget 代 表 珑 形 4， 如 图 5-13 所 示 。 


组 织 动 作 配置 动作 


ml ink 选择 要 设置 文本 的 元 件 
设置 义 字 于 4 = "[[target.name]]", and 昔 纶 - 
2 3 = "[[This.name]]", and 之 隐藏 未 命名 的 元 件 
于 2 = "[[target.name]]", and 所 | se 和 二 

文字 于 1 = "[[This.name]]" 当前 元 件 
辆 焦点 元 件 
4 (矩形 ) to "[[target.name]]" 
3 (矩形 ) to "[[This.name]]" 
2 (矩形 ) to "[[target name]]" 
1 (矩形 ) to "[[This.name]]" 


= [ltarget.name]] 


图 5-13 ”设置 文本 


(3) 预 移 原型 。 单 击 矩 形 1， 执 行 结果 如 图 5-14 所 示 。 


图 5-14 预览 的 原型 


. 矩形 1 被 设 为 [This.name]|，This 代 表 和 纶 形 1， 所 以 矩形 1 上 的 文字 是 矩形 1 的 名 称 1。 

. 矩形 2 被 设 为 [[target.name]]，target 代 表 甜 形 2， 所 以 矩形 2 上 的 文字 是 矩形 2 的 名 称 2。 

. 矩形 3 被 设 为 [This.name]|，This 代 表 和 纶 形 1， 所 以 矩形 3 上 的 文字 是 矩形 1 的 名 称 1。 

. 算 形 4 被 设 为 [[target.name 有 〗，target 代 表 适 形 14， 所 以 给 形 4 上 的 文字 是 矩形 4 的 名 称 4。 
276 件 属性 变量 

在 元 件 变量 中 ， 除 了 This 和 Target， 其 他 变量 都 是 代表 元 件 属 性 的 变量 。 下 面 列 出 Axure RP 中 所 有 元 件 属性 变量 的 含义 。 

“x; 元 件 的 横 坐 标 。 

.y: 元 件 的 纵 坐 标 。 

. width: 元 件 的 宽度 。 

height: 元件 的 高 度 。 

.sctollX: 元 件 横 向 滚动 距离 。 

scrollY: 元 件 纵向 滚动 距离 。 

.text: 元 件 上 的 文字 。 

.name: 元 件 的 名 称 。 

. top: 元 件 所 占 位 置 的 最 顶点 的 y 值 。 

. left: 元 件 所 占 位 置 的 最 左 点 的 x 值 。 

-fight: 元 件 所 占 位 置 的 最 右 点 的 x 值 。 

.bottom: 元 件 所 占 位 置 的 最 底 点 的 y 值 。 

opacity: 元 件 的 不 透明 度 。 

.fotation: 元 件 的 旋转 角度 。 

提示 : 


使 用 元 件 属性 变量 时 ， 输 入 框 中 默认 播 入 [[This. 属性 名 ]〗， 例 如 [[Ihis.x]。 这 是 因为 属性 必须 属于 某 个 元 件 才 有 意义 。 属 性 和 元 件 之 间 以 点 “.” 连 
接 。 下 面 看 一 个 案例 ， 来 深入 了 解 元 件 中 各 个 属性 的 含义 。 


(1) 随意 画 一 个 元 件 ， 如 图 5-15 所 示 ， 将 元 件 命名 为 “形状 ”。 


十 添加 用 例 
4 "时 息 标 单 击 时 


A Case1 


及 设置 文字 于 This = "x : [[This.x]l]y : 
IThisylh 
思 鼠标 移入 时 
嘱 ”鼠标 移出 时 


上 

| 

语 | 
本 
2 
i 

| 

二 

| 

| 

-了 品 


图 5-15 ”添加 元 件 


(2) 在 元 件 “ 鼠 标 单 击 时 ”事件 中 添加 动作 “设置 文本 ”。 选 择 设 置 “当前 元 件 ” 的 文本 ， 如 图 5-16 所 示 。 


(3) 文本 的 值 如 图 5?-17 所 示 的 设置 。 手 动 输入 属性 名 称 、 冒 号 ， 然 后 插入 元 件 属性 变量 。 例 如 ，x: [[This.x]]。 


提示 : 
属性 变量 需要 写 在 括号 [用 之 内 ， 括 号 外 的 文本 会 被 当 作 普通 文本 来 显示 。 


配置 动作 
选择 要 设置 文本 的 元 件 


LL 
近东 


Iv| 隐藏 未 命名 的 元 件 


当前 元 件 to "x : [[This.x]]y : [[This.y]]..." 
加 | 焦点 元 件 
同 形状 (形状 ) 


设置 文本 为 : 
值 w| |x : [[This.x]] 'fx 


图 5-16 ”设置 文本 


RP 编辑 文本 


在 下 方 编辑 区 输入 文本 , 变量 名 称 或 表达 式 要 写 在 "[["]]" 中 。 例 如 : 插入 变量 [[OnLoadVariable]] 返 回 值 为 变 
量 "OnLoadVariable" 的 当前 值 ; 插入 表达 式 [[VarA + VarB]] 返 回 值 为 "VarA + VarB" 的 和 ; 插入 [[PageName]] 返回 值 为 当前 页 面 名 


x : [[This.x]] 

y : [[This.y]] 

height : [[This.height]] 
width : [[This.width]] 


evallV ，TrTii- mavenllV11 


在 下 
秋 加 局 这 


后 


图 5-17 插入 变量 


(4) 单 击 “ 确 定 ” 按 钮 后 预 抱 原型 。 单 击 图 形 时 ， 可 以 看 到 元 件 的 属性 显示 了 出 来 ， 如 图 5-18 所 示 。 


Xx: 31 

下 41 
“一 eight: 170 
widthi—300— 
scrollX: 0 AL 
scrollY: 0 


rotation: 0 


图 5-18 预览 原型 


元 件 的 属性 通常 用 来 精确 地 控制 交互 动画 ,或 者 设置 复杂 的 用 例 条 件 。 后 文 有 很 多 实际 案例 会 用 到 元 件 的 属性 。 


5.1.4 局 部 变量 


5.1.2 节 介绍 了 如 何 使 用 “当前 元 件 ”或 “目标 元 件 ” 的 属性 。 本 节 来 介绍 如 何 使 用 “任意 元 件 ” 的 属性 。 
1. 举 例 况 明 局 部 变量 作用 


下 面 举 一 个 “ 拖 动 轴 ” 的 例子 。 球 可 以 随 光标 拖 动 而 移动 ， 但 不 超出 轴 的 范围 ， 如 图 5-19 所 示 。 所 以 在 拖 忠 球 的 过 程 中 需要 获取 “ 轴 ” 元 件 的 位 置 
及 大 小 属性 ， 超 出 范围 则 停止 拖 动 。 


图 5-19 ”案例 预览 


具体 实现 步骤 如 下 。 


(1) 添加 一 个 圆 角 起 形 ， 命 名 为 “ 轴 ”。 添 加 一 个 椭圆 形 ， 转 换 为 动态 面板 ， 并 命名 为 “ 球 ”， 如 图 ?5-20 所 示 。 


宽度 [J] 高 度 


图 5-20 ”转换 为 动态 面板 


(2) 在 球 “ 拖 动 时 ”事件 中 添加 动作 “移动 ”。 配 置 拖 忠 球 为 “水 平 拖 动 ”， 单 击 “ 添 加 边界 ”链接 ， 如 图 5-21 所 示 。 


(3) “添加 边界 ”的 参数 选择 “ 右 侧 ”和 “<=” 选项， 如 图 5-22 所 示 。 


组 织 动作 配置 动作 
二 庆 Case1 选择 要 移动 的 元 件 
时 移动 球 水 平 拖 动 Es 加 | 隐藏 未 命名 的 元 件 


司 当前 元 件 
用 加 球 ( 动 志 面 概 ) 水 平 拖 动 
梧 轴 ( 拭 形 ) 


动画 | 无 


界限 滞 加 边界 


图 5-21 设置 球 为 水 平 拖 动 


(4) 单 击 fx 按钮 ， 进 入 “编辑 值 ”对 话 框 ， 如 图 ?-23 所 示 。 由 于 元 件 “ 轴 ”不 是 This， 也 不 是 target， 想 获取 它 的 属性 ， 只 能 通过 添加 局 部 变量 的 
方式 来 获取 。 


(5) 单 击 “添加 局 部 变量 ”链接 ， 如 图 5-23 中 红色 标注 框 所 示 。 变 量 名称 设 为 z， 并 设置 z 等 于 元 件 “ 轴 ”。 


移 友 水平 拖 动 
动 男 无 


图 5-22 ”选择 添加 边界 参数 


在 下 方 编辑 区 输入 文本 , 变量 名 称 或 表达 式 要 写 在 "[["]]" 中 。 例 如 : 插入 变量 [[OnLoadvariable]] 返 回 值 为 变 
旦 "OnLoadVariable" 的 当前 值 ; 播 入 表达 式 [[VarA + VarB]] 返 回信 为 "VarA + VarB" 的 和 ; 播 入 [[PageName]] 返回 信 为 当前 页 面 名 


-局 部 变量 
在 下 方 创建 用 于 播 入 人 的 局 部 变量 ， 局 部 变 旦 名称 必须 是 字母 、 数 字 , 不 允许 包含 空格 。 


图 5-23 ”添加 局 部 变量 
(6) 添加 了 局 部 变量 之 后 ， 就 可 以 使 用 局 部 变量 了 。 在 “编辑 值 ” 对 话 框 上 方 填写 [[z.right]]， 代 表 元 件 “ 轴 ”的 最 右 侧 坐 标 ， 如 图 5-24 所 示 。 
RP 完 辑 人 


在 下 方 编辑 区 输入 文本 交 呈 变量 名 称 称 或 表达 式 要 写 在 oj 中。 例如 : 插入 变量 I[OnLoadVariable]] 返 回信 为 变 
量 "OnLoadwvariable" 的 当前 值 ; 插入 表达 式 [[VarA + VarB]] 返 回 值 为 VaraA + VarB" 的 和 ; 插入 [[PageName]] 返回 慎 为 当前 页 面 名 
称 。 


局 部 变量 


在 下 方 创建 用 于 插入 fx 的 局 部 变量 ， 局 部 变量 名 称 必须 是 字母 、 数 字 , 不 允许 包含 空格 。 


添加 局 部 变星 


图 5-24 使 用 局 部 变量 
(7) 这 样 ， 束 实现 了 让 “ 球 ” 的 边界 小 于 等 于 “ 轴 ” 的 右 侧 边界 。 
(8) 重复 上 述 步骤 ， 再 添加 一 个 边界 ,边界 参数 设置 为 “ 左 侧 大 于 等 于 [[z.left]]”， 如 图 5-25 所 示 。 


此 时 预 抱 原型 可 以 看 到 ， 拖 忠 “ 球 ”时 ， 不 会 超过 “ 轴 ” 的 左 、 右 边界 了 。 


2. 局 部 变量 的 有 效 范 围 


局 部 变量 的 有 效 范 围 很 小 ， 只 在 一 个 fx 编辑 界面 内 有 效 。 上 文案 例 中 在 添加 第 二 个 边界 条 件 时 ， 再 次 添加 局 部 变量 z， 设 置 z 等 于 “ 轴 ” 才 可 以 ， 


如 图 5- 26 所 示 。 


=- llzright] fx % 


-| | |[[z.left]] fx 其 


图 5-25 ”添加 边界 


在 下 方 编辑 区 输入 文本 , 变量 名 称 或 表达 式 要 写 在 "[[""]]" 中 。 例 如 : 插入 变量 [[OnLoadVariable]] 返 回 值 为 变 
量 "OnLoadVariable" 的 当前 值 ; 插入 表达 式 [[VarA + VarB]] 返 回 值 为 "VarA + VarB" 的 和 ; 插入 [[PageName]] 返回 值 为 当前 页 面 名 


EET 局 部 变量 名 称 必须 是 字母 、 数 字 , 不 允许 包含 空格 ， 


图 5-26 局 部 变量 只 在 低 编 辑 界面 内 有 效 


5.1.5 页面、 窗口 和 妃 标 指针 变量 


Axure RP 中 可 以 通过 变量 来 获取 原型 页 面 、 浏 览 器 窗口 和 鼠标 指针 的 相关 信息 。 


. PageName: 页 面 名 称 ， 可 以 在 站 点 地 图 中 设置 。 
. Window.width: 预览 时 ， 当 前 浏览 器 窗口 的 宽度 。 


* Window.height: 预览 时 ， 当 前 浏览 器 窗口 的 高 度 。 


.Window.sctollX: 窗口 纵向 滚动 距离 。 
.Window.sctollY: 窗口 横向 深 动 距离 。 

.Cutsot.x: 当前 鼠标 的 x 坐 标 。 

.Cursot.y: 当前 鼠标 的 y 坐 标 。 

. DragX: 当前 瞬间 拖 息 的 横向 距离 。 

. DragY: 当前 瞬间 拖 彼 的 纵向 距离 。 

TotalDragX: 元 件 本 次 总 共 被 抱 息 的 横向 总 距离 。 
TotalDragY: 元 件 本 次 总 共 被 拖 息 的 纵向 总 距离 。 


" DragTime: 元 件 本 次 拖 慢 总 时 间 。 


2. 举 例 讲解 
下 面 讲解 一 个 案例 ， 将 各 变量 显示 出 来 ， 以 加 深 读者 的 理解 。 
(1) 添加 一 个 算 形 ， 命 名 为 “ 窍 形 ”， 然 后 将 算 形 转换 为 动态 面板 。 


(2) 在 矩形 “鼠标 单 击 时 ”事件 中 添加 动作 “设置 文本 ”。 设 置 矩 形 的 文本 为 “ 值 ”， 如 图 5-27 所 示 ， 显 示 PageName、Window.width、 


Window.height 这 3 个 变量 。 


RP 编辑 文本 


在 下 方 编辑 区 输入 文本 , 变量 名 称 或 表达 式 要 写 在 "[["]]" 中 。 例 如 : 插入 变量 [[OnLoadVariable]] 返 回 值 为 变 
量 "OnLoadyvariable'" 的 当前 值 ; 插入 表达 式 [[VarA + VarB]] 返 回 值 为 "VarA + VarB" 的 和 ; 插入 [[PageName]] 返回 值 为 当前 页 面 名 


称 。 
he 


PageName:[[PageName]] 
indow.width:[[Window.width]] 
indow.height:[[Window.height]] 


| | = 
- 局 部 变量 


在 下 方 创建 用 于 插入 fx 的 局 部 变量 ， 局 部 变量 名 称 必须 是 字母 、 数 字 , 不 允许 包 合 空 格 。 


图 5-27 在 “鼠标 单 击 时 ”事件 中 设置 文本 


(3) 为 矩形 “ 拖 动 时 ”事件 添加 两 个 动作 “移动 ”“ 设 置 文本 ”。 配 置 当前 元 件 随 鼠 标 拖 动 而 移动 。 设 置 矩 形 的 文本 为 “ 值 ”， 如 图 ?-28 所 示 ， 显 


个 琴 旦 


示 CursorX、Cursor.y、DragX、DragY、TotalDragX、TotalDragY 和 DragTime 共 7 个 变量 。 


rp 编辑 文本 


在 下 方 编辑 区 输入 文本 , 变量 名 称 或 表达 式 要 写 在 "[["]]" 中 。 例 如 : 插入 变量 [[OnLoadVariable]] 返 回 值 为 变 
量 "OnLoadVariable" 的 当前 值 ; 插入 表达 式 [[VarA + VarB]] 返 回 值 为 "VarA + VarB" 的 和 ; 插入 [[PageName]] 返回 值 为 当前 页 面 名 


称 。 


Cursor.x:[[Cursor.x]] 
Cursor.y:[[Cursor.y]] 


在 下 方 创建 用 于 插入 fx 的 局 部 变量 ， 局 部 变量 名 称 必须 是 字母 、 数 字 , 不 允许 包含 空格 。 


| Ws 


图 5-28 在 “ 拖 动 时 事件 中 设置 文本 
(4) 为 整个 页 面 “ 窗 口 滚动 时 ”添加 动作 “设置 文本 ”。 设 置 矩形 的 文本 为 “ 值 ”， 如 图 5-29 所 示 ， 显 示 Window.scrollX 和 Window.scrollY 两 个 


变 


要 


O 


rp 编辑 文本 


在 下 方 编辑 区 输入 文本 , 变量 名 称 或 表达 式 要 写 在 "[["]]" 中 。 例 如 : 插入 变量 [[OnLoadVariable]] 返 回 值 为 变 
量 "OnLoadVariable" 的 当前 值 ; 揪 入 表达 式 [[VarA + VarB]] 返 回 值 为 "VarA + VarB" 的 和 ; 插入 [[PageName]] 返回 值 为 当前 页 面 名 


称 。 


1 Eben 


Window.scrollX:[[Window.scrollX]] 
Window.scrollY:[[Window.scrollY]] 


局 部 变量 


在 下 方 创建 用 于 插入 fx 的 局 部 变量 ， 局 部 变量 名 称 必须 是 字母 、 数 字 , 不 允许 包含 空格 。 
添加 局 部 变 旦 


图 5-29 在 “窗口 滚动 时 ”事件 中 设置 文本 


预 儿 原型 ， 拖 岛 和 矩形 时 可 以 看 到 鼠标 指针 的 变量 ， 单 击 矩 形 时 可 以 看 到 页 面 的 变量 ,滚动 窗口 时 可 以 看 到 窗口 的 变量 。 


Axure RP 中 有 5 类 函数 。 但 一 般 情况 下 ， 只 要 用 好 “加 、 减 、 乘 、 除 ”函数 束 能 解决 95% 的 问题 了 。 对 于 没有 学 过 编程 的 读者 可 以 略 过 这 一 节 ， 以 后 
需要 用 时 再 查询 。 


toFixed: 控制 变量 的 小 数 点 位 数 。 在 [VAR.toFixed (decimalPoints) ] 中 ，LVAR 代 表 变 量 ，decimalPoints 代 表 小 数 点 位 数 ; 
. toExponential: 将 变量 值 转换 为 指数 计数 法 表示 。 在 [[LVAR.toExponential (decimalPoints) ] 中 ，LVAR 代 表 变 量 ，decimalPoints 代 表 保 留 位 数 ; 


.toPrecision: 控制 变量 的 精确 位 数 。 在 [LVAR.toPrecision (length) ] 中 ，LVAR 代 表 变 量 ，length 代 表 精 确 位 数 。 


5.2.2 ”字符 申 消 数 


` length: 返回 变量 的 字符 长 度 。 在 [[LVAR.lengthllj 中 ，LVAR 代 表 变 量 。 

.charAt: 返回 指定 位 置 的 字符 。 在 [LVAR.charAt (index) ]] 中 ，LVAR 代 表 变 量 ，index 代 表 位 置 。 

. charCodeAt: 返回 指定 位 置 的 字符 Unicode 编 码 。 在 [LVAR.charCodeAt (index) ]] 中 ，LVAR 代 表 变 量 ，index 代 表 位 置 。 

Concat: 在 变量 后 接 上 指定 字符 串 。 在 [LVAR.concat ('string') ]] 中 ，LVAR 代 表 变 量 ，'stting 是 指定 字符 串 。 

. indexOf: 搜索 指定 字符 在 变量 中 的 位 置 。 在 [ILVAR.indexOf ('seatchValue') 中 ，LVAR 代 表 变 量 ，'searchValue' 是 指 要 搜索 的 字符 串 。 


.lastIndexOf: 从 后 向 前 搜索 指定 字符 在 变量 中 的 位 置 。 在 [ILVAR.lastIndexOf ('searchvalue') 了 中，LVAR 代 表 变 量 ，'seatchvalue' 是 指 要 搜索 的 字符 


. Slice: 按 指定 位 置 截 断 变量 字符 串 。 在 [ILVAR.slice (statt，end) 有 中，LVAR 代 表 变 量 ，start 是 开始 截断 位 置 ，end 是 结束 截断 位 置 。 


Split: 按 指定 的 分 隔 符 号 把 变量 字符 串 分 割 为 几 段 。 在 [[LVAR.split ('separator' ，limit) 中 ，LVAR 代 表 变 量 ，'separator 是 指定 的 分 隔 符 号 ，limit 限 


制 了 分 割 后 留 下 前 几 段 字符 事 。 例 如 a=1.2.3.4.5，[[a.split (''，2) ] 为 1 和 2。 


Substr: 从 指定 位 置 开始 ， 截 取 变 量 字符 串 中 指定 长 度 的 字符 。 在 [LVAR.substr (start，length) ] 中 ，LVAR 代 表 变 量 ，statt 是 开始 位 置 ，length 是 指 


Substting: 截取 变量 中 两 个 指定 位 置 间 的 字符 。 在 [[LVAR.substting (from，to) 用 中，LVAR 代 表 变 量 ，from 和 to 分 别 是 指定 的 起 止 位 置 。 
` toLowerCase: 把 变量 中 的 字符 转换 为 小 写 。 在 [LVAR.toLowerCase () ] 中 ，LVAR 代 表 变 量 。 

" toUpperCase: 把 变量 的 中 字符 转换 为 大 写 。 在 [[LVAR.toUpperCase () ] 中 ，LVAR 代 表 变 量 。 

. toString: 把 变量 转换 为 字符 格式 。 在 [[LVAR.toStting () ] 中 ，LVAR 代 表 变 量 。 


` tim: 去 除 字 符 串 两 端 空格 。 在 [LVAR.tim () ] 中 ，LVAR 代 表 变 量 。 


5.2.3 ”数学 国 赤 


Axure RP 中 提供 了 一 些 数学 函数 ， 可 以 进行 单 见 的 数值 计算 。 另 外 ， 在 做 交互 动画 时 ， 可 以 用 来 计算 动画 轨迹 。 


“90 本 地， 如 [[5%2]]j=1。 


. abs (x) : [[Math.abs (x) 用， 取 x 的 绝对 值 。 

asin (x) : [[Math.asin (x) 用 ， 取 x 的 反 、 正 蓄 值 。 

. acos (x) : [[Math.acos (x) ]， 取 x 的 反 余 弦 值 。 

atan (x) : [[Math.atan (x) ]， 取 x 的 反正 切 值 。 

- atan2 (y，x) : [[Math.atan (x) ]， 和 返回 原点 至 点 (x,，y) 的 方位 角 (弧度 ) 。 
. sin (x) : [[Math.sin (x) 有 ， 取 x 的 正弦 值 。 

“cos (x) : [[Math.cos (x) ]， 取 x 的 余弦 值 。 

` tan (x) : [[Math.tan (x) 用 ， 取 x 的 正切 值 。 

. pow (x, y) : [IMath.pow (x) ]]， 和 返回 x 的 y 次 需 。 

. cxp (x) : [[Math.exp (x) 用， 返回 e 的 x 次 方 。 

“log (x) : [[Math.log (x) 了 ]， 返 回 x 的 自然 对 数 。 

- sqrt (x) : [[Math.sqrt (x) ]， 取 x 的 平方 根 。 

.ceil (x) : [[Math.ceil (x) ]， 对 x 向 上 取 整 。 

. floor (x) : [[Math.floor (x) ]， 对 x 向 下 取 整 。 

max (xX，y) : [[Math.max (x) 〗， 返 回 x 和 y 中 的 最 高 值 。 
.min (x，y) : [[Math.min (x) ]， 和 返回 x 和 y 中 的 最 低 值 。 


. tandom () : [[Math.random (x) 有 ， 返 回 一 个 大 于 0 小 于 1 的 随机 赤 


5.2.4 日 期 沼 妆 


Axure RP 提供 了 一 些 日 期 浮 数 ， 用 于 日 期 的 查询 、 计 算 和 格式 转换 。 制 作 选 择 日 期 、 时 间 的 原型 时 会 用 到 这 些 消 数 。 
now: [INow]]， 返 回 当前 日 期 和 时 间 。 

" genDate: [[GenDate 有 | ， 返 回 原 型 生成 的 日 期 和 时 间 。 

. getFullYear: [INow.getFullYear () ]， 返 回 当 前 年 份 yyyy。 
getMonth: [I[INow.getMonth () ]， 返 回 当 前 是 第 几 月 。 
.pgetMonthName: [[INow.getMonthName () ]， 返 回 当 前 月 份 名 称 。 
:pgetDate: [INow.getDate () ]， 返 回 当 前 日 期 的 “日 ”。 

getDay: [INow.getDay () ]， 返 回 当前 是 一 周 中 的 第 几 天 。 
getDayOfWeek: [INow.getDayOfWeek () ]， 和 返回 当前 是 星期 几 。 
:pgetHours: [INow.getHoutrs () ]， 和 返回 当前 时 间 的 “时 ” 
petMinutes: [[INow.getMinutes () ]， 返 回 当前 时 间 的 “分 ”。 
:getSeconds: [[Now.getSeconds () ]， 和 返回 当前 时 间 的 “ 秒 ”。 


getMilliseconds: [[Now.getMilliseconds () 用 ， 返 回 当 前 时 间 的 “毫秒 ” 


:petTime: [INow.getTime () ]]， 返 回 1970 年 1 月 1 日 至 今 的 毫秒 数 。 

:petTimezaneOffset: [INow.getTimezoneOffset () 有 ， 返 回 当 地 时 间 与 格林 威 治标 准时 间 (GMT) 的 分 钟 差 。 
getUTCFullYear: [INow.getUTCFullYear () 有 ， 返 回 当 前 全 球 标准 日 期 的 “年 ”。 

getUTCMonth: [INow.getUTCMonth () 用， 返回 当前 全 球 标准 日 期 的 “月 ”。 

. getUTCDate: [[INow.getUTCDate () 用， 返回 当前 全 球 标准 日 期 的 “日 ”。 

getUTCDay: [INow.getUTCDay () 用 ， 返 回 当 前 全 球 标准 日 期 是 星期 几 。 

getUTCHours: [[Now.getUTCHours () 有 ， 返 回 当 前 全 球 标准 时 间 的 “时 ”。 

getUTCMinutes: [[Now.getUTCMinutes () 用 ， 返 回 当 前 全 球 标准 时 间 的 “分 ”。 

. getUTCSeconds: [INow.getUTCSeconds () 用 ， 返 回 当 前 全 球 标准 时 间 的 “ 秒 ”。 

. getUTCMilliseconds: [INow.getUTCMilliseconds () 了]， 返 回 当 前 全 球 标 准时 间 的 “毫秒 ”。 

. patse: 返回 1970 年 1 月 1 日 午夜 到 指定 日 期 的 毫秒 数 ， 在 [[Date.patse (datestring) ]] 中 ，datestting 为 指定 日 期 ， 格 式 为 yyyy/mmy/dd。 
. toDateStting: [INow.toDateString () ] 中 ， 把 当前 日 期 转换 为 字符 串 格式 。 

.toISOString: [INow.toISOString () ] 中 ， 把 当前 日 期 转换 为 ISO 格式 的 字符 串 。 

.toJSON: [INow.toJSON () 了 中， 把 当前 日 期 进行 JSON 序 列 化 。 

.toLocaleDateStting: [[INow.toLocaleDateString () ] 中 ， 把 当前 日 期 转换 为 本 地 时 间 格 式 的 字符 串 。 
.toLocaleTimeStting: [INow.toLocaleTimeStting () ] 中 ， 把 当前 时 间 转 换 为 本 地 时 间 格 式 的 字符 串 。 
.toLocaleSttring: [INow.toLocaleStting () ] 中 ， 把 当前 日 期 和 时 间 转 换 为 本 地 时 间 格 式 的 字符 串 。 
.toTimeString: [INow.toTimeString () ] 中 ， 把 当前 时 间 转 换 为 字符 串 。 

. toUTCStting: [INow.toUTCString () ] 中 ， 把 当前 全 球 标 准时 间 转 换 为 字符 串 。 

. UTC: [[Date.UTC (yeat，month，day，hourf，min，sec，millisec) ]]， 根 据 世 界 时 间 返 回 1970 年 1 月 1 日 到 指定 日 期 的 毫秒 数 。 
.valueOf: [INow.valueOf () ]， 和 返回 当前 日 期 的 原始 值 (类 似 getTime) 。 

. addYears (years) : [INow.addYears (years) ]， 在 当前 日 期 上 增加 指定 年 数 。 

. addMonths (months) : [[Now.addYears (months) 用 ， 在 当前 日 期 上 增加 指定 月 数 。 

addDays (days) : [[Now.addYears (days) ]]， 在 当前 日 期 上 增加 指定 天 数 。 

addHours (houts) : [INow.addYeats (houts) 用 ， 在 当前 日 期 上 增加 指定 小 时 数 。 

addMinutes (minutes) : [[Now.addYears (minutes) ]， 在 当前 日 期 上 增加 指定 分 钟 数 。 

. addseconds (seconds) : [INow.addYears (seconds) ]]， 在 当前 日 期 上 增加 指定 秒 数 。 


addMilliseconds (ms) : [INow.addYeats (ms) ]， 在 当前 日 期 上 增加 指定 毫秒 数 。 


5.2.5 布尔 函数 


布尔 是 一 种 数据 类 型 。 布 尔 值 包括 两 个 ， 即 true 和 false。 若 一 个 表达 式 为 真 ， 则 这 个 表达 式 返 回 布 尔 值 true; 若 一 个 表达 式 为 假 ， 则 这 个 表达 式 返 
回 布尔 值 false。 


==: 例 [[a==b]，a 等 于 b 则 表达 式 为 true。 

`! =: 例 [la! =bllj，a 不 等 于 b 则 表达 式 为 true。 

<: 例 [[a< 1=""> 

“<=: 例 [[a<=b]]，a 小 于 等 于 b 则 表达 式 为 ttue。 

` >: 例 [[a>bj]]，a 大 于 b 则 表达 式 为 true。 

` >=: 例 [[a>=bllj，a 大 于 等 于 b 则 表达 式 为 true。 
 &&: 例 [[a&&b]]，a 和 b 都 为 tue， 则 表达 式 才 为 true。 


| |: 例 [la|1 急 ，a 和 b 中 只 要 有 一 个 为 tue， 则 表达 式 就 为 true。 


5.3 ”中 继 器 Repeater 


5.3.1 复制 


中 继 器 的 英文 叫做 Repeater。 中 继 器 的 作用 束 是 “复制 ”。 其 实 翻译 为 “中 继 嚣 ”， 不 如 翻译 为 “复制 器 ”简单 明了 。 
把 中 继 器 拖 蝶 到 画布 上 ， 可 以 看 到 默认 有 三 个 和 矩形， 分 别 写 着 1、2、3， 如 图 5-30 所 示 。 在 右 侧 ， 中 继 器 的 属性 栏 中 有 一 个 表格 ,一 共 3 行 ， 分 别 写 
着 1、2、3。 这 不 是 巧合 。 属 性 栏 中 的 表格 是 中 继 器 的 “数据 集 ”。 数 据 集 有 多 少 行 ， 中 继 器 融会 复制 几 次 。 
检视 : 中 继 器 
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图 5-30 ”中 继 器 的 数据 集 


双击 中 继 器 ， 进 入 中 继 器 的 页 面 。 中 继 器 会 复制 这 个 页 面 中 的 所 有 元 件 。 例 如 在 图 5-31 中 ， 中 继 器 里 只 有 一 个 矩形 ， 所 以 中 继 器 复制 了 3 次 这 个 矩 
形 。 
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图 5-31 中 继 器 内 容 


中 继 器 每 次 复制 的 复制 品 可 以 称 为 一 个 复制 项 。 


5.3 ”中 继 器 Repeater 


5.3.1 复制 


中 继 器 的 瑞 文 叫做 Repeater。 中 继 器 的 作用 就 是 “复制 ”。 其 实 翻译 为 “中 继 器 ”， 不 如 翻译 为 “复制 器 ”简单 明了 。 


把 中 继 器 拖 蝶 到 画布 上 ， 可 以 看 到 默认 有 三 个 矩形 ， 分 别 写 着 1、2、3， 如 图 5-30 所 示 。 在 右 侧 ， 中 继 器 的 属性 栏 中 有 一 个 表格 ,一 共 3 行 ， 
着 1、2、3。 这 不 是 巧合 。 属 性 栏 中 的 表格 是 中 继 器 的 “数据 集 ”。 数 据 集 有 多 少 行 ， 中 继 器 融会 复制 几 次 。 
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图 5-30 ”中 继 器 的 数据 集 


双击 中 继 器 ， 进 入 中 继 器 的 页 面 。 中 继 器 会 复制 这 个 页 面 中 的 所 有 元 件 。 例 如 在 图 5-31 中 ， 中 继 器 里 只 有 一 个 矩形 ， 所 以 中 继 器 复制 了 3 次 这 个 矩 
形 。 
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图 5-31 中 继 器 内 容 


中 继 器 每 次 复制 的 复制 品 可 以 称 为 一 个 复制 项 。 


5.3.2 ”数据 集 


数据 集 在 中 继 器 的 属性 栏 中 。 

. 双击 “ 列 名 称 ” 可 以 直接 修改 列 名 称 。 列 名 称 只 能 使 用 英文 。 

. 双击 “添加 列 ”、“ 添 加 行 ” 按钮， 可 以 添加 新 的 行 或 列 。 

双击 列表 中 的 数据 可 以 直接 修改 数据 。 

数据 集 顶 部 的 按钮 可 以 添加 、 删 除 、 移 动 任意 一 行 或 一 列 。 

按 如 图 5-32 所 示 添 加 数据 并 修改 名 称 。 第 一 列 id 中 有 5 个 值 1|、2、3、4、5。 第 二 列 content 中 有 5 个 值 a、b、c、d、&。 


数据 集中 可 以 填写 数字 或 文字 ， 也 可 以 添加 图 片 和 页 面 。 在 数据 集 表 格 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “引用 页 面 ”命令 (如 图 5-33 所 示 ) ， 即 
可 在 数据 集中 保存 页 面 的 链接 ; 在 弹出 的 快捷 菜单 中 选择 “导入 图 片 ”命令 ， 即 可 在 数据 集中 导入 图 片 。 


可 以 用 中 继 器 实现 不 同 复制 项 以 加 载 不 同 图 片 ， 或 者 单 击 不 同 复制 项 打开 不 同 页 面 的 效果 。 


HSY 


图 5-32 ”数据 集 


图 5-33 ”添加 页 面 与 图 片 


5.3.3 ”样式 


中 继 器 的 背景 色 、 边 框 、 圆 角 (背景 的 圆 角 ) 、 填 充 等 样式 的 设置 与 其 他 元 件 类 似 。 中 继 器 独 有 的 样式 选项 有 布局 、 背 景 、 分 页 和 间距 等 ， 如 图 5- 
34 所 泵 。 


功 框 一 航 ， UP mi 


豆角 半径 10 


垂直 〈 ) 水 平 
网 格 排 布 


图 5-34 中 继 器 样式 


布局 : 复制 项 的 布局 排列 方式 。 默 认 选 择 重 直 布 局 ， 如 图 5-35a 所 示 。 还 可 以 选择 水 平 布 局 。 网 格 排 布 功能 可 以 控制 每 行 或 每 列 的 数量 ， 多 余 项 目 
另 起 一 行 或 另 起 一 列 。 例 如 ， 如 图 5-35b 所 示 就 是 水 平 布局 、 网 格 排 布 、 每 行 项 目 数 为 3。 第 4 个 和 第 5 个 复制 项 另 起 一 行 显 示 。 


` 背景 : 中 继 器 可 以 为 每 一 个 复制 项 设置 背景 ， 甚 至 可 以 选择 交替 切换 背景 色 。 每 个 项 目的 “背景 ， 设 置 会 履 盖 整个 中 继 器 的 “背景 色 ” 设置。 


. 分 页 : 设置 了 分 多 页 显示 后 ， 中 继 器 会 将 复制 项 分 页 ， 只 显示 其 中 一 页 。 样 式 栏 中 可 以 设置 每 页 项 目 数 和 起 始 展示 哪 一 页 ， 如 图 5-36 所 示 ， 每 页 3 
2 项 了 。Axure RP 有 一 个 交互 动作 “中 继 器 -设置 当前 显示 页 面 ” 可 以 调整 中 继 器 显 


(中 继 器 ) (index) 
0 


(中 继 器 ) (index) index 


b ) 水 平 网 格 排 布 


图 5-35 布局 样式 


图 5-36 ”分 页 样式 


. 间距 : 设置 每 行 每 列 之 间 的 间距 。 它 与 “填充 ”样式 有 所 区 别 。 “填充 ”样式 给 中 继 器 整体 设置 间距 ， 而 “间距 ”样式 给 每 个 复制 项 设置 间距 。 


3.3.4” 触 友 事件 


中 继 器 有 以 下 3 个 触 友 事 件 。 
` 载 入 时 : 预览 原型 时 ， 中 继 器 刚刚 加 载 出 来 时 触发 这 个 事件 ， 与 其 他 元 件 类 似 。 
` 每 项 加 载 时 : 每 次 复制 时 都 会 触发 这 个 事件 。 
` 项 目 调整 尺寸 时 : 当 复 制 项 尺寸 改变 时 会 触发 这 个 事件 。 


“每 项 加 载 时 ”事件 中 有 一 个 默认 的 用 例 。 设 置 拭 形 上 的 文字 为 [[item.Column0]]， 如 图 5-37 所 示 。 其 中 ，Column0 是 数据 集中 第 1 列 的 名 称 。 在 前 
几 蔬 中 改过 列 名 称 后 ， 这 里 已 经 变 成 [[Item.id]] 了。 


二 ， 载 入 时 
4 尺 每 项 加 载 时 


deh Case' 


S 设置 义 字 于 ( 窃 形 ) = "[[ltem.id]]' 
嘱 ”项 目 调整 尺寸 时 


图 5-37 每 项 加 载 时 


“每 项 加 载 时 ”事件 友 生 时 ， 当 前 是 第 几 个 复制 项 ，[[ltem.id]] 融 代表 数据 集中 idq 列 的 第 几 行 数据 。 例 如 ， 案 例 中 第 1 个 矩形 上 的 文字 是 id 列 的 第 1 个 
数据 1。 第 2 个 矩形 上 的 文字 是 id 列 的 第 2 个 数据 2， 依 次 类 推 。 


通常 在 “每 项 加 载 时 ”事件 中 做 初始 化 工作 。 例 如 ， 用 中 继 器 实现 图 文 列表 时 ， 可 以 在 中 继 器 中 添加 文字 、 图 片 元 件 ， 设 好 样式 ， 在 “每 项 加 载 
时 ”设置 每 行 的 具体 文字 和 图 片 。 


5.3.5 ”中 继 器 变量 


打开 “每 项 加 载 时 ”动作 设置 界面 ， 然 后 再 打开 “设置 文本 ”动作 的 fx 编辑 界面 ， 单 击 “ 插 入 变量 或 负数 ”链接 ， 可 以 看 到 中 继 器 的 变量 ， 如 图 ?5-38 
所 示 。 


| 和 


在 下 方 编辑 区 输入 文本 , 变量 名 称 或 表达 式 要 写 在 " 
量 "DnLoadVariable" 的 当前 值 ; 插入 表达 式 [[VarA + 
WR。 


六 全 局 本章 
二 中 继 器 /数据 集 
tem 
tem .id 
tem.content 

INndex 
isFirst 
IsLast 
isEven 
isOQdd 
isMarked 


IsVisible 


repeater 


图 5-38 中 继 器 的 变量 


` Item: 代表 当前 复制 项 ， 很 少 直接 使 用 。 


Item.idN\Item.content: 代表 数据 集中 某 列 某 行 的 值 ， 前 面 介 绍 过 。 

.index: 单 击 后 插入 [[Item.indexjlj。 代 表 当 前 是 第 几 个 复制 项 ， 对 应 了 数据 集 的 第 几 行 。 

.isFitrst: 单 击 后 插入 [[Item.isFirst]。 如 果 当 前 是 第 1 个 复制 项 ， 这 个 变量 为 tue， 否 则 为 false。 

.isLast: 单 击 后 插入 [[Item.isLastl。 如 果 当 前 是 最 后 一 个 复制 项 ， 这 个 变量 为 true， 否 则 为 false。 

. isEven: 单 击 后 插入 [[Ltem.isEven]]。 如 果 当 前 是 第 2、4、6 等 第 偶数 个 复制 项 ， 这 个 变量 为 ttue， 否 则 为 false。 

. isOdd: 单 击 后 插入 [[Item.isOddj]。 如 果 当 前 是 第 1、3、5 等 第 奇数 个 复制 项 ， 这 个 变量 为 trtue， 否 则 为 false。 

. isMarked: 单 击 后 插入 [[Item.isMarked]]。 如 果 当 前 元 件 被 交互 动作 “标记 行 ” 标 记过 ， 则 这 个 变量 为 ttue， 否 则 为 false。 
" isVisible: 单 击 后 插入 [[Item.isVisiblelj。 如 果 当 前 元 件 可 见 ， 则 这 个 变量 为 ttue， 否 则 为 false。 
提示 : 

以 上 几 个 is 开头 的 变量 ， 通 常用 于 条 件 判 断 中 。 

.ftepeatet: 单 击 后 插入 [[Item.fepeatetl。 代 表 中 继 器 元 件 ， 很 少 直接 使 用 。 

.visibleItemCount: 单 击 后 播 入 [[Item.tepeatet.visibleItemCounhtl。 等 于 中 继 器 中 可 见 项 目 数 。 

:itemCount: 单 击 后 插入 [[Item.tepeatet.itemCountl。 等 于 中 继 器 中 正在 显示 的 项 目 数 (有 些 项 目 会 被 交互 动作 “添加 筛选 ”过 滤 掉 ) 。 
. dataCount: 单 击 后 插入 [[Item.tepeatet.dataCount]j。 等 于 中 继 器 中 的 所 有 项 目 数 。 

pageCount: 单 击 后 插入 [[Item.repeater.pageCount]]。 等 于 中 继 器 中 的 总 页 数 。 


pageIndex: 单 击 后 插入 [[Item.repeatet.pagelndex]]。 等 于 中 继 器 中 的 当前 页 数 。 


5.3.6 ”交互 动作 


打开 任意 动作 编辑 界面 ， 可 以 看 到 中 继 器 独 有 的 交互 动作 ， 如 图 5-39 所 示 。 


1. 排 序 
排序 将 会 对 整个 中 继 器 产生 影响 ， 按 数据 集中 的 某 列 ， 对 所 有 复制 项 进行 升序 或 降序 排列 。 
下 面 给 中 继 器 添加 一 个 排序 ， 试 试 效 果 。 


(1) 在 中 继 器 上 方 添加 两 个 按钮 ， 分 别 命名 为 “ 正 序 ” “倒序 ”， 如 图 5-40 所 示 。 


4 中 继 器 
添加 排序 
移 除 排序 
添加 师 选 
移 除 师 选 
设置 当前 显示 页 面 


设置 母 页 项 目 数 量 | 
4 数据 集 
添加 行 
标记 行 
取消 标记 
更 新 行 
删除 行 


图 5-39 ”中 继 器 的 交互 动作 


图 5-40 ”添加 按钮 


(2) 在 “ 正 序 ” 按 钮 “鼠标 单 击 时 ”事件 中 添加 动作 “中 继 器 -添加 排序 ”。 排 序 “ 名 称 ” 设 为 “ 正 序 ”。 排 序 “ 属 性 ” 按 id 升序 排序 。 由 于 id 都 是 
数字 ， 所 以 排序 类 型 选择 Number， 如 图 5-41 所 示 。 


rp 用 例 编辑 < 鼠标 单 击 时 > 


用 例 名 称 case 1 | | 油 0 件 


添加 动作 组 织 动作 配置 动作 


》 链接 4 加 Case1 选择 要 添加 排序 的 中 继 器 
元 件 | 时 添加 排序 正 序 为 (中 继 器 ) EE 同 隐藏 未 命名 的 元 件 
， 全 局 变量 | | 闭 (中 继 器 ) Add 正 序 
中 继 器 
移 除 排序 
添加 筛选 
移 除 筛选 
设置 当前 显示 页 面 
设置 每 页 项 目 数量 
数据 集 
添加 行 
标记 行 
取消 标记 
更 新 行 
删除 行 


排序 类 型 :Number 
顺序 : 升序 


图 5-41 添加 排序 - 正 序 
(3) 同样 ,在 “倒序 ”按钮 “鼠标 单 击 时 ”事件 中 添加 动作 “中 继 器 -添加 排序 ”。 排 序 属性 按 id 降 序 排序 ， 如 图 5-42 所 示 。 


rp 用 例 编辑 < 妃 标 单 击 时 > 


用 例 名 称 “Case 1 ] 
组 织 动 作 ee 
| | Py Case 1 -] ,和 pr rm 
及 添加 排序 倒序 为 (中 继 器 ) 
(中 继 器 ) Add 倒序 


添加 筛选 
移 除 筛选 
设置 当前 显示 页 面 
设置 每 页 项 目 数 去 
4 ”数据 集 
添加 行 
标记 行 
取消 标记 
更 新 行 名 称 : 
删除 行 属性 : id 


“排序 类 型 : Number 


图 5-42 ”添加 排序 -倒序 


(4) 预 史 原型 。 单 击 “ 正 序 ” 按 钮 ， 中 继 器 按 升 序 排列 ， 单 击 “ 倒 序 ” 按 钮 ， 中 继 器 按 降序 排列 ， 如 图 5-43 所 示 。 


2. 筛 选 


中 继 器 允许 对 数据 集中 某 列 或 某 几 列 设置 条 件 ， 符 合 条 件 的 复制 项 显示 ， 不 符合 条 件 的 复制 项 隐藏 。 
下 面 举 一 个 例子 ， 实 现 按 和 奇数 偶数 筛选 功能 。 


(1) 添加 两 个 按钮 ， 分 别 命名 为 “奇数 ”“ 偶 数 ”， 如 图 5-44 所 示 。 


图 5-43 ”预览 原型 


图 5-44 ”添加 两 个 按钮 


/小 击 二 1 小 ” > ~ 二 口 
0 动 | 器 17 人 \ 0 先 ” oO 人 “移民 其 | " 工 让 只 有 


为 “奇数 ”，“ 条 件 为 [[item.id%2==1]]”， 除 2 余 1 的 是 奇数 ， 如 图 5-45 所 示 。 
提示 : 
筛选 条 件 需要 符合 要 求 的 格式 。 一 般 条 件 的 形式 都 是 判断 数据 集中 某 列 的 各 项 数据 是 否 等 于 、 大 于 、 小 于 某 个 值 。 
如 果 有 多 个 条 件 ， 需 要 用 || 或 && 连 接 。 例 如 ， 
[[ (item.content=='a) || (item.content=='b') ] 表 示 item.conteht 等 于 a 或 者 b。 
[[ (item.id! ='1') && (item.content! ='b') ] 表 示 item.id 不 等 于 1， 并 且 item.content 不 等 于 b。 


(3) 同样 ,在 “偶数 ”按钮 “鼠标 单 击 时 ”事件 中 添加 动作 “中 继 器 -添加 筛选 ”， 篇 选 命名 为 “偶数 ”， 条 件 为 [[item.id%2==0]]， 除 以 2 后 余 0 
的 是 偶数 ， 如 图 5-46 所 示 。 


中 用例 力 辑 < 区 标 单 击 时 > 


用 例 客 称 Case 1 
添加 动作 组 织 动作 配置 动作 
”链接 4 西 Case1 选择 村 添加 衍 选 的 中 继 器 
;元 性 时 添加 筛选 奇 豆 Remove other flters 为 (中 纵 器 ) | | Bi 
bp 全 局 变量 (中 继 串 ) Add 奇数 Remove other fiters 
中 灵 踢 
添加 排序 
移 队 排序 
移 除 入 选 
设置 当前 显示 网 面 
设置 每 页 项 目 数量 
二 数据 集 
添加 行 
标记 行 
取消 标记 
更 新 行 
删 队 行 


国 移 除 其 它 入 和 


名 称奇 


条件 [Item id%2== 们 
格式 : [TItem.XX == "WW 例如 : [[ltem.age == "18] 


图 5-45 ”添加 筛选 -奇数 


卫 用例 沪 辑 < 鼠标 单 击 时 > 


用 全 名称 td 
添加 动作 
| 》 链接 
”元 件 
》 全 局 变量 
中 继 器 
添加 排序 
移 除 排序 
添加 师 选 
移 蒜 姓 选 
设置 当前 旱 示 页 面 
设置 每 页 项 目 数量 
添加 行 
标记 行 
取消 标记 
更 新 行 
删除 行 


组 织 动 作 


站 到 Case1 


配置 动作 
选择 要 添加 筛选 的 中 维 器 


上 滔 加 得 这 惕 鼓 Ramove other filters 为 [中 淮 跟 ) | 三 站 


名 (中 继 蚁 ) Add 偶数 Remove other filers 


| 贺 移 除 其 它 竺 选 
偶数 


[[tem.idis2==0]] 
格式 : [[item.Xx == 'XX]] 例如 : [[ltem.age == "187] 


图 5-46 ”添加 筛选 -偶数 


(4) 预览 原型 。 单 击 “ 奇 数 ” 按 钮 ， 只 显示 1、3、5; 单 击 “偶数 ”按钮 ， 只 显示 2、4， 如 图 5-47 所 示 。 


除了 按 条 件 筛选 ， 中 继 器 还 可 以 分 页 筛选 显示 。 


(1) 在 属性 栏 设 置 分 页 。 勾 选 “多 页 显示 ” 复 


(2) 添加 两 个 按钮 ， 分 别 为 “上 一 页 ” 


每 页 项 目 数 ”为 2， 如 图 5-48 所 示 。 


“下 一 页 ”按钮 ， 如 图 5-49 所 示 。 


(3) 在 “上 一 页 ”按钮 “鼠标 单 击 时 ”事件 中 添加 动作 “设置 当前 显示 页 面 ”。 “选择 页 面 为 ”Previous， 如 图 5-50 所 示 。 这 样 每 次 单 击 “ 上 一 


页 ”按钮 ， 中 继 器 都 会 向 上 翻 一 页 。 


a ) 奇数 b ) 偶数 
多 页 显示 
每 页 项 目 数 2 | 


] 


起 始 页 1 | 


图 5-48 预览 原型 


mr 用 例 编辑 < 忌 标 单 击 时 > 


用 例 名 称 |Case 1 
添加 动作 \ Be 
六 这 选择 村 设置 当前 页 的 中 翅 器 
记 生 大 午 设置 当前 页 于 1 中 灵 昭 ) 为 Previous 芷 在 
bb 全 局 变量 
道 。 中 涂 句 
添加 排序 
移 除 排 序 
添加 入 选 
移 除 项 先 
设置 每 页 需 目 数量 
二 数据 集 
逐 吉 行 
标记 行 
取 清 标记 


[| (中 失 句 ) Set to Previous 


删除 行 


图 5-50 设置 当前 显示 页 面 - 上 一 页 


(4) 在 “下 一 页 ”按钮 “鼠标 单 击 时 ”事件 中 添加 动作 “设置 当前 显示 页 面 ”。 “选择 页 面 为 ”next， 如 图 5-51 所 示 。 这 样 每 次 单 击 “下 一 页 " 
钮 ， 中 继 器 都 会 向 下 翻 一 页 。 


mm 用 俩 瞩 辑 < 鼠标 单 击 时 > 


用 例 名 称 Case 1 
添加 动作 组 织 动作 配 罗 动作 


对 设置 当前 页 于 (中 多 器 ) 为 Next 0 | 加 让 全 的 元 作 
辆 中 灼 器 ) Setto Next | 


添加 排序 
移 除 排序 
添加 筛选 
移 除 入 选 
设置 当前 品 示 页 面 


设置 每 页 项 目 数量 
添加 行 
标记 行 
取消 标记 
更 新 行 
删除 行 


图 5-51 设置 当前 显示 页 面 - 下 一 页 


(5) 预 蜗 原型 。 单 击 “ 上 一 页 ”“ 下 一 页 “按钮 ， 页 面 会 按 顺 序 切换 ， 如 图 5-52 所 示 。 


9 绸 一 页 1) 审 二 页 


图 5-52 ”预览 原型 


3 数据 集 


Axure RP 可 以 通过 交互 动作 在 数据 集中 添加 、 修 改 、 删 除数 据 。 下 面 继续 上 文 的 案例 ， 学 习 添 加 、 删 除数 据 的 方法 。 


(1) 添加 两 个 按钮 ， 分 别 命 名 为 “添加 ”“ 删 除 ” 按 钮 ， 如 图 5?-53 所 示 。 


图 5-53 ”添加 两 个 按钮 


(2) 在 “添加 ”按钮 “鼠标 单 击 时 ”事件 中 添加 动作 “添加 行 ”。 勾 选 “ 中 继 器 ” 复 选 框 ， 为 中 继 器 添加 行 ， 如 图 ?5-54 所 示 。 


辆 用 例 综 辑 < 鼠标 单 击 时 > 


用 例 | 名称 Case 1 | | 
添加 动作 组 织 动 作 配置 动作 
| bp 链接 | 4 Case1 “| 选 抬 要 添加 行 的 中 继 器 
》 元 件 | 于 添加 行 1 为 (中 给 品 ) | | ， 加 隐 车 未 命名 的 元 件 
》 全 局 二 | 加 coal | 
' J 中 维 器 | 
添加 排序 
牧 际 排序 
添加 牧 选 
秘 科 入 选 
设置 当前 县 示 页 面 
误 旱 每 页 项 目 数 量 
4 数据 集 
io 行 
取消 标记 
更 新 行 
删除 行 


共 添 加 1 项 | 添加 行 | 


图 5-54 添加 动作 


(3) 单 击 “添加 行 ”按钮 ， 弹 出 “添加 行 到 中 继 器 ”对 话 框 。 在 其 中 可 以 设置 新 添加 的 数据 ， 如 图 5-55 所 示 。 


RP 乏 系 加 行 到 中 继 费 


content 


图 5-55 “添加 行 到 中 继 器 ”对 话 框 


(4) 单 击 idq 列 的 fx 按钮 ， 进 入 “编辑 值 ”对 话 框 。 在 其 中 添加 局 部 变量 (等 于 中 继 器 ， 人 在 上 方 填写 表达 式 [[ritemCount+1]， 表 示 中 继 器 中 的 项 目 数 
加 1， 如 图 5-56 所 示 。 


ETE 


在 下 万 编 辑 区 输入 文本 , 变量 名 称 或 表达 式 要 写 在 "[["]]" 中 。 例 如 : 插入 变量 [[OnLoadVariable]] 返 回 值 为 变 
'OnLoadVariable" 的 当前 值 ; 插入 表达 式 [[varA + VarB]] 返 回 值 为 "VarA + VarB" 的 和 ; 插入 [[PageName]] 返回 值 为 当前 页 面 名 


称 


[[ritemCount+1]] 


-局 部 变量 
在 下 万 创建 用 于 插入 fx 的 局 部 变量 ， 局 部 变量 名 称 必须 是 字母 、 数 字 , 不 允许 包含 空格 。 


图 5-56 “编辑 值 ”对 话 框 


(5) 单 击 “ 确 定 ” 按 钮 ， 回 到 上 一 界面 。 每 次 添加 行 时 会 在 id 列 中 添加 一 个 刚 设置 的 值 ， 在 content 列 中 添加 一 个 空 值 ， 如 图 5-57 所 示 。 


RP 添加 行 到 中 继 器 


content 


图 5-57 添加 行 


(6) 在 “删除 ”按钮 “鼠标 单 击 时 ”事件 中 添加 动作 “删除 行 ”。 勾 选 “ 中 继 器 ” 复 选 框 。 删 除 条 件 设置 为 [[ltem.id==r.itemCount]]，r 是 局 部 变 


量 代表 中 继 器 元 件 ， 将 id 等 于 项 目 总 数 的 那 一 行 删除 ， 如 图 5-58 所 示 。 


rp 用 例 绩 辑 < 饼 标 单 击 时 > 


用 例 名 称 ,case 1 | 添加 条 件 


添加 动作 组 织 动作 配置 动作 
| 名 所 | 4 品 case1 | 选择 要 删除 行 的 中 继 器 . 
》 全 局 变量 中 圭 壤 ) ae 
二 中 此 器 
添加 排序 
移 除 排序 
添加 往 选 
移 除 储 先 
设置 当前 显示 页 面 
设置 每 页 项 目 数量 
雪 数据 集 
添加 行 
标记 行 


更 新 行 


图 5-58 删除 行 


(7) 预 抱 原型 。 单 击 “ 添 加 ”按钮 ， 中 继 器 会 增加 一 个 项 目 ; 单 击 “ 删 除 ”按钮 ， 中 继 器 会 删除 编号 最 大 的 项 目 ， 如 图 5-59 所 示 。 


a ) 早 击 湛 加 ”按钮 b ) 早 击 “删除 ”按钮 


图 5-59 ”预览 原型 


5.4 数据 操作 案例 


前 面 已 经 介绍 过 了 Axure RP 中 变量 、 函 数 、 中 继 器 、 数 据 集 的 基础 知识 。 灵 活 运用 这 些 功能 可 以 实现 很 多 精彩 的 交互 效果 。 下 面 是 一 些 与 此 相 天 的 


IJ| 
案例 。 


5.4.1 案例 13: 模拟 制作 “奇妙 清单 'APP 


“奇妙 清单 ”是 一 个 待 办 事项 APP， 如 图 5-60 所 示 。 “奇妙 清单 ”中 最 重要 的 交互 束 是 添加 、 管 理 待 办 事项 列表 。Axure RP 可 以 很 好 地 实现 这 种 需 
要 对 数据 进行 操作 的 交互 效果 。 


下 面 来 讲解 如 何 利 用 中 继 器 来 实现 待 办 事项 列表 。 通 过 这 个 案例 ， 可 以 帮助 读者 加 深 对 中 继 器 的 理解 ， 掌 握 可 操作 列表 的 实现 方法 。 
1. 待 办 列表 


(1) 用 和 矩形、 椭圆 形 元 件 摆好 手机 外 框 ， 如 图 ?5-61 所 示 。 


(2) 用 文字 、 图 标 、 和 矩形 、 文 本 框 元 件 摆好 页 面 上 的 标题 栏 和 输入 框 ， 并 将 这 些 元 件 一 起 转换 为 动态 面板 “外 框 ”， 然 后 固定 外 框 的 大 小 ， 如 图 5- 
62 所 示 。 


屋 Wunderlist 原 型 


做 yahoo weather 原 型 


做 呈 iron 原型 


七 T 了 七 站 ESSl 
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图 5-60 ”奇妙 清单 


Home X | 待 办 事项 (Home) 
0 | ,303 


303 


E06 


图 5-61 手机 外 框 


Home (1) 


图 标 
文本 框 提示 


(3) 添加 中 继 器 ， 命 名 为 
(4) 在 


(5) 添加 动态 面板 “标记 ' 


“ 竺 办 事项 ”中 添加 “和 矩形” 元件， 作为 其 表 


， 添 加 两 个 状态 ， 


起 形 
星 形 图 标 


图 5-62 ”设计 标题 栏 和 输入 框 


“ 待 办 事项 ”。 


景 框 。 给 矩形 设置 阴影 ， 


分 别 展示 


鼠标 单 击 时 
状态 改变 时 
拖 动 开始 时 
拖 翅 9 寺 
拖 动 结束 时 

向 大 顽 fh 疆 击 Bi 


概要 : 页 面 


4 匾 外 框 (动态 面板 ) 
A Statel 


以 突出 内 容 。 


。 在 图 5-63 中 “ 买 买 买 ” 那 一 行 的 标记 是 “未 完成 ” 状 


“ 写 一 篇 教程 ” 那 一 行 的 标记 是 “已 完成 ”状态 。 


(6) 添加 动态 面板 “内 容 ， 
“无 日 期 限制 ”状态 ， 


: 添加 两 个 状态 ， 分 别 展示 “无 日 期 限制 ”的 状态 和 “有 日 期 限制 ”的 状态 。 
标记 为 已 完成 那 一 行 的 内 容 是 “有 日 期 限制 ”状态 。 


在 图 5-63 中 “ 买 买 买 ” 那 一 行 的 内 容 


各 


(7) 将 内 容 面 板 “ 正 常 ” 状 态 中 的 文字 元 件 命名 为 “内 容 ”， 将 内 容 面板 “有 期 限 ” 状 态 中 的 两 个 文字 元 件 分 别 命 名 为 “内 容 (限制 日 
期 ) ”和 “日 期 ”。 


(8) 添加 动态 面板 “ 星 标 ” 
标 ” 状 态 。 


: 添加 两 个 状态 ， 分 别 展示 “有 星 标 ”和 “无 星 标 ”状态 。 如 图 5-63 所 示 ， 左 侧 上 面 是 “无 星 标 ”状态 ， 下 面 是 “有 星 


[| Home 
4 寺 外 框 (动态 面板 ) 
4 吧 列表 
4 用 待 办 事项 (中 继 器 ) 
4 坊 标记 (动态 面板 ) 
4 本 未 完成 
4 于 已 完成 


标记 ”内容 


Im 
bl 
两 


星 标 


占 ”内容 (动态 血 椒 ) 
4 表 正常 

4 于 有 期 限 

圳 星 标 (动态 面板 ) 
4 于 无 

4 一 有 


图 5-63” 待 办 事项 


提示 : 
五 角 星 可 以 用 图 形 元 件 做 。 五 角 星 的 红色 背景 可 以 用 “钢笔 ”功能 画 出 。 对 号 可 以 用 水 平 线 元 件 摆 出 ， 也 可 以 用 “钢笔 ”功能 画 出 。 


(9) 在 星 标 面板 “鼠标 单 击 时 ”事件 中 添加 动作 : 单 击 “ 星 标 ” 按 钮 时 ， 将 面板 切换 为 下 一 个 状态 ， 直 到 最 后 再 从 头 开 始 循环 ， 如 图 5-64 所 示 。 这 
样 融 实现 了 单 击 一 次 加 上 星 标 ， 再 单 击 一 次 取消 星 标的 效果 。 


4 对 鼠标 单 击 时 


A hh Case' 


多 ”设置 This 为 Next 逐渐 out 500ms 逐渐 in 500ms wrap 


图 5-64 切换 面板 状态 


(10) 修改 中 继 器 的 数据 集 ， 如 图 5-65 所 示 。 


content IsStarred IsCGChecked date isDued 六 WY 


他 Wunderlist/ 训 下 1 明天 0 
人 yahoo weather 0 明天 


0 
做 airbnb 原 型 0 明天 0 
打扫 房 辣 | / 明天 1 
添加 订 


图 5-65 ”数据 集 
content 列 是 待 办 事项 的 内 容 。 
isStarred 列 用 来 记录 是 否 加 了 星 标 。 
“ isChecked 列 用 来 记录 是 否 已 完成 。 
` isDued 列 用 来 记录 是 否 有 日 期 限制 。 
“ date 列 是 待 办 事项 的 日 期 限制 。 


(11) 在 中 继 器 “每 项 加 载 时 ”事件 中 添加 3 个 用 例 ， 用 例 之 间 是 if.…..if..…..if..……. 的 关系 。 发 生 触 发 事件 时 依次 执行 3 个 用 例 ， 如 图 5-66 所 示 。 


4 “四 ”每 项 加 载 夺 


站 权 Case2 
(上 |[Iitem.isStarred||] == 1 


及 设置 星 标 为 有 


二 二 Case3 
(lf "[[Item.isDued]] == "1") 


友 设置 内 容 为 有 期 限 


Case 1 
(lf True) 


设置 文字 于 内 容 = "[[ltem.content]]", and 
文字 于 内 容 ( 限制 日 期 ) = "[[ltem.content]]", and 
文字 于 日 期 = "[[ltem.date]]" 


对 移动 已 完成 to (0 ,lfthis.bottom+90]]) 


图 5-66 “每 项 加 载 时 ”事件 用 例 


:Case1 用 于 初始 化 每 个 复制 项 的 数据 。 设 置 “内 容 。 和 “内 容 (限制 日 期 ) ”的 文本 等 于 content 列 中 的 文本 。 设 置 “ 日 期 的 文本 等 于 date 列 中 的 文 


Case2 用 于 设置 中 继 器 中 星 标 面板 的 状态 。 如 果 isStarred 为 1， 则 设置 为 “有 ” 星 标 的 状态 。 
. Case3 用 于 设置 中 继 器 中 内 容 面 板 的 状态 。 如 果 isDued 为 1， 则 设置 为 “有 期 限 ”的 状态 。 


(12) 回 到 外 框 面板 中 ， 可 以 看 到 中 继 器 加 载 了 数据 集中 的 数据 变 成 了 如 图 5-67 所 示 的 样子 。 
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400 
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| 做 Wunderlist 原 型 


做 yahoo Weather 尿 型 


| 司 airbnb 厦 型 


| 


打扫 房 间 


4UU 


图 5-67 加载 了 数据 的 中 继 器 
2. 查 看 详情 
单 击 列 表 上 的 待 办 事项 可 以 打开 待 办 事项 的 详情 页 面 。 下 面 是 实现 步骤 。 
(1) 在 列表 页 面 的 旁边 摆好 查看 详情 的 页 面 。 将 详情 页 面 的 元 件 一 起 转换 为 动态 面板 ， 并 命名 为 “详情 ” ， 如 图 5-68 所 示 。 
(2) 将 “详情 ”面板 左上 角 的 文字 元 件 命 名 为 “详情 内 容 ”。 
. 在 “详情 ”面板 右上 角 添 加 星 标 面板 。 添 加 方法 与 中 继 器 中 的 星 标 面 板 类 似 。 
- 在 “详情 ”面板 中 添加 “上 日期” 面板。 在 “日 期 ”面板 中 添加 两 个 状态 ，“ 无 ”状态 和 “有 ”状态 。 两 个 状态 中 文字 元 件 的 颜色 不 同 。 


外 框 / 列表 (Home) 
0 


《6 收 件 箱 


隐藏 上 | 
| 做 Wunderlist 原 型 : 二 | 设置 到 期 | ] ee 


442 711 


9 | x 加 毕 标 诡 度 [] 高 度 
| “做 yahoo weather 原 型 A 提醒 匠 


0 


本 | 元 件 角 度 
| “做 airbnb 原 型 克 | 0 侍 儿 | 


门 | 打扫 房间 


4 强 外 框 ( 动 全 面板 ) 
4 三 列表 
4 寺 详情 (动态 面板 ) 
A ww State1 

4 才 日 期 (动态 面板 ) 
A 本 无 
A 本 有 

4 医 星 标 (动态 面板 ) 
站 本 儿 


A mw 石 
> FF 待 办 事项 (中 继 器 ) 


图 5-68 “详情 ” 面板 


(3) 在 “ 竺 办 事项 ”事件 的 中 继 器 中 添加 热 区 元 件 。 在 热 区 “鼠标 单 击 时 ”事件 中 添加 两 个 用 例 。 两 个 用 例 是 站 .… 计 .…… 的 关系 。 友 生 事件 时 ， 依 
次 执行 两 个 用 例 ， 如 图 5-69 所 示 。 


待 办 事项 (Home) 外 框 / 列表 (Home) 
0 2oo 400 
= | 上 帅 G 一 一 一 一 一 一 a 四 
| 其 闫 洋 口 六 
加 口 口 


;| Se 鼠标 单 击 时 


A :Case1 
(If True) 


时 移动 详情 by (-442.0) 挥 摆 500ms 
多 设置 文字 于 详情 内 容 = "[[ltem.content]” 
著 设 加 日 期 为 无 


AE Case2 
(If "THtem isDued]' == "1") 


及 设 豆 文字 于 日 期 = 'TIHem.date])' 


rn 


图 5-69 “和 鼠标 单 击 时 ”事件 用 例 


: 在 Case1 中 添加 移动 动作 。 单 击 热 区 时 ， “详情 ”面板 从 右 至 左 滑 入 。 移 动 方式 设 为 by， 距 离 设 为 442 像 素 。442 是 列表 页 面 的 宽度 ，-442 代 表 向 左 
移动 442 像 素 。 


. 在 Case1 中 初始 化 了 “详情 ”面板 中 的 数据 。 将 “详情 内 容 ” 元 件 设置 为 中 继 器 的 conteht 列 的 值 。 黑 认 情 况 下 ， 将 日 期 设置 为 “无 ”状态 。 


. Case2 用 于 处 理 有 限制 日 期 的 情况 。 中 继 器 的 isDued 列 等 于 1 时 执行 Case2。 此 时 ， 设 置 日 期 面板 为 “有 ”状态 。 同 时 ， 将 日 期 面板 “有 ”状态 中 的 广 
字 设 为 中 继 器 date 列 的 值 。 


(4) 在 “详情 ”面板 “向 右 拖 动 结束 时 ”事件 中 添加 动作 “移动 ”， 如 图 5-70 所 示 。 向 右 拖 蝶 面板 时 ， 详 情 面 板 向 右 滑 出 屏幕 。 移 动 方 式 设 为 by,， 
距离 设 为 442 像 素 。 


4 “四 向 右 拖 动 结束 时 


A 二 Case1 


多 ”移动 This by (442,0) 摇摆 500ms 


图 5-70 “向 右 拖 动 结束 时 ”事件 用 例 


(5) 预览 原型 。 单 击 “ 竺 办 事项 ”列表 上 的 任意 一 项 ， 都 会 出 现 详情 页 面 ， 如 图 2-71 所 示 。 详 情 页 面 中 的 数据 与 列表 相对 应 。 


做 Wunderlist 原 型 


-ee 


图 5-71 预览 原型 


3. 添 加 待 办 事项 
在 输入 框 中 输入 文字 ， 单 击 “ 提 交 ” 按 钮 或 直接 按 EnteI 键 后 ， 则 立即 在 列表 中 增加 一 个 待 办 事项 。 下 面 是 实现 步骤 。 
(1) 在 列表 页 面 右上 角 添加 一 个 “对 号 ”图 标 ， 然 后 转换 为 动态 面板 ， 并 将 其 命名 为 “提交 ”， 如 图 5-72 所 示 。 
(2) 将 “提交 ”面板 设 为 隐藏 。 
(3) 将 文本 框 元 件 命名 为 “输入 ”， 如 图 5-73 所 示 。 
在 文本 框 元 件 “ 获 取 焦 点 时 ”事件 中 添加 动作 “显示 面板 ， 将 提交 设 为 显示 。 


- 在 文本 框 元 件 “ 按 键 按 下 时 ”事件 中 添加 动作 ， 添 加 行 ， 然 后 将 文本 框 中 的 文字 清空 。 
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十 添加 用 例 cm 创建 连接 


鼠标 单 击 时 
状态 改变 时 
拖 动 开始 时 

拖 动 时 
拖 动 结束 时 

向 左 拖 动 结束 时 
向 右 拖 动 结束 时 
载 入 时 


™ 
™ 
™ 
| 
a | 
™ 


| 做 airbnb 原 型 去 
[| Home 
| 打扫 房间 放 添加 备注 ... 4 寺 外 框 (动态 面板 ) 
明天 4 三 列表 


b 区 提交 (动态 面板 ) 
》 坟 详情 (动态 面板 ) 
》 国 待 办 事项 (中 继 器 ) 


图 5-72 “提交 ”面板 


外 框 /列表 (Home) Home 待 办 列表 / State1 (Home (1) (1)) 外 框 /列表 {Home (1) (1)) 
0 125 |250 375 


《和 收 件 箱 


4 别 按键 按 下 时 


动 Case1 
(f 按 下 的 键 == Return 
and 文字 于 输入 上 = ") 


时 添加 行 1 为 待 办 事项 
及 设置 文字 于 This=" 
4 马 ”获取 焦点 时 
Me Case1 
及” 显示 提交 


_ | 做 airbnb 原 型 太 
一 | 打扫 房间 二 国 。 添加 备注 人 
一 拓 天 ee 


>》 才 提交 (动态 面板 ) 
》 才 详情 (动态 面板 ) 
》 图 待 办 事项 (中 继 器 ) 


图 5-73 ”显示 “提交 ”按钮 
(4) 文本 框 元 件 “ 按 键 按 下 时 ”事件 中 的 用 例 有 两 个 条 件 ， 如 图 5-74 所 示 。 
用 户 按 Entet 键 。 判 断 “ 按 下 的 键 ”是 否 等 于 键 值 “Return”。 


“ 文本 框 中 不 为 空 。 判 断 文本 框 元 件 上 的 文字 是 否 不 等 于 空 ( 值 的 输入 框 中 不 输入 任何 内 容 即 表示 “ 空 ”) 。 


if 按 下 的 键 == Return 
and 文字 于 输入 !="" 


图 5-74 设立 条 件 
(5) 双击 “添加 行 ”动作 ， 弹 出 “添加 行 到 中 继 器 ”对 话 框 ， 如 图 5-75 所 示 。 在 content 列 添加 文本 框 元 件 上 的 文字 。 其 他 的 列 都 添加 “0” 
(6) 在 “提交 ”面板 “鼠标 单 击 时 ”事件 中 添加 两 个 用 例 ， 如 图 5-76 所 示 。 


.Case1 用 来 处 理 文字 不 为 空 的 情况 。 当 文本 框 中 文字 不 为 室 ， 也 就 是 用 户 输入 了 文字 时 ， 单 击 “ 提 交 ” 按 钮 ， 就 将 文本 框 上 的 文字 添加 到 中 继 器 的 
数据 集中 。 添 加 “添加 行 ”动作 ， 配 置信 息 与 第 (5) 步 相 同 ， 不 再 更 述 。 


Case2 的 条 件 是 IfTrue。 任 何 情 况 下 Case2 都 会 执行 ， 不 管 文本 框 上 的 文 否 为 空 ， 都 将 隐藏 “提交 ”面板 。 


content isStarred : isChecked 


FN aE 


[Thistext] fxo fxo 


fx 


图 5-75 添加 行 到 中 继 器 


(ff 文字 于 输入 =" 
矿 添加 行 人 
及 设置 文字 于 输入 =" 


A Case2 
(lf True) 


5 wh This 
"A | 


图 5-76 “ “和 鼠标 单 击 时 ”事件 用 例 


(7) 预 蜗 原型 。 在 输入 框 里 输入 任意 内 容 ， 单 击 “ 提 交 ” 按 钮 ， 便 可 以 看 到 输入 的 文字 已 经 加 入 列表 ， 变 成 一 个 待 办 事项 了 ， 如 图 5-77 所 示 。 


人 收 件 箱 


向 Wunderlist 原 型 | | 做 Wunderlist 原 型 


几 yahoo weather 原 型 由 yahoo Weather 原 型 


做 airbnb] 原 型 履 airbnb 原 型 


要 局 打扫 房间 
组 于 明王 


a ) 输入 杠 b ) 单 击 “ 提 交 ” 按 甸 


图 5-77 预览 原型 


4. 完 成 竺 办 事项 
完成 竺 办 事项 后 ， 在 竺 办 事项 左边 的 方 框 中 “ 打 勾 ”， 将 该 事项 标记 为 已 完成 ， 并 将 其 移 到 已 完成 列表 中 。 下 面 介绍 实现 方法 。 


(1) 在 中 继 器 “ 待 办 事项 ”事件 中 添加 一 个 矩形 ， 代 表 “ 收 起 ”状态 的 已 完成 列表 。 然 后 将 输入 框 、 待 办 事项 、 和 矩形 一 块 转换 为 动态 面板 ， 并 命 
为 “ 待 办 列表 ”， 如 图 5-78 所 示 。 


外 框 /列表 (Home) : 本 
| 0 和 769 


0 | 三 寻 | | 
¢ 收 件 箱 待 办 只 


| 做 Yahoo weather 原 型 友 人 坦 王 我 | 
: State1 


| 做 Wunderlist 原 型 


/ | \ bb Home 


打扫 房间 添加 备注 4 坊 外 框 (动态 面板 ) 
明太 冯 男 列表 
” 电 提交 (动态 面板 ) 
611 丫 已 完成 任务 :时 详情 (动态 面板 ) 
4 坊 待 办 列表 (动态 面板 ) 


是 国 State1 


Fr 


b 待 办 事项 (中 继 串 ) 


图 5-78 “ 待 办 列表 ”面板 


(2) 给 “ 待 办 列表 ”添加 交互 动画 ， 实 现 可 拖 蝶 的 效果 ， 如 图 5-79 所 示 。 


. 在 “ 拖 动 时 ”事件 中 添加 动作 “ 随 拖 动 移动 ”。 
: 在 “ 拖 动 结束 时 ”事件 中 添加 动作 “ 移 回 初 始 位 置 ”。 (14，75) 是 动态 面板 的 初始 位 置 。 用 例 条 件 是 待 办 列表 的 y 坐 标 大 于 等 于 75。 也 就 是 
当 “ 待 办 列表 ”被 下 拉 到 低 于 初始 位 置 时 ， 松 手 后 该 列表 会 自动 弹 回 初始 位 置 。 这 样 就 实现 了 列表 的 弹性 效果 。 


(3) 在 “ 待 办 列表 ”底部 添加 一 个 中 继 器 ， 命 名 为 “完成 事项 ”， 如 图 5-80 所 示 。 “完成 事项 ”中 继 器 与 “ 待 办 事项 ”中 继 器 类 似 。 “完成 事 
项 ”中 继 器 中 的 “标记 ”面板 默认 为 “已 完成 状态 ”。 在 “完成 事项 ”中 继 器 的 中 部 增加 一 个 水 平 线 元 件 ， 看 起 来 像 是 内 容 被 划 掉 了 ， 让 完成 的 状态 更 明 


确 。 


用" 尼 拖 动 时 
A Case1 


于 移动 This 垂直 拖 动 


4 电 ” 拖 动 结束 时 


是 辐 Case 1 
(if ULTmS.w >= 5 ) 


SS 移动 This to (14,75) 榨 控 500ms 


图 5-79 ” 拖 幼 列表 


完成 事项 (Home)】 X | 符 办 列表 / State1 (Home) 外 框 / 列表 (Home) 
0 100 200 | 300 


eS 


图 5-80 “完成 事项 ”中 继 器 


(4) “完成 事项 ”中 继 器 的 交互 动作 、 数 据 集 跟 “ 待 办 事项 ”中 继 器 基本 一 样 ， 如 图 5-81 所 示 。“ 完 成 事项 ”中 继 器 和 “ 待 办 事项 ”数据 集中 的 各 
列 是 一 一 对 应 的 。 这 样 方便 后 续 步骤 在 二 者 之 间 传 递 数 据 。 


Ca 
Es 
4 “ 必 ” 每 项 加 载 时 
站 三 Case3 
Uf [ltem.isdued]] == 1 ) 
及 ”设置 内 容 为 有 期 限 
站 二 Case2 
(lf [[ltem.isstarred]] == 1 | 
及 设置 星 标 为 有 
关 站 age 
(If True) 
大 设置 文字 于 内 容 ="[[Htem.content]” and 
区 字 于 内 容 (限制 日 期 ) = 
[Utem-content , and 


XX 字 于 日 期 = "[lltem.date]] 


时 ” 项目 调整 尺寸 时 
vw 中 继 器 
content isstarred Ischecked 
做 Wunderlist 原 型 1 
做 yahoo weather 0 0 
做 airbnb 原 型 0 0 
打扫 房间 1 0 
汤加 麻 _ 


图 5-81 交互 动作 、 数 据 集 


(5) 在 “ 待 办 事项 ”中 的 标记 面板 “鼠标 单 击 时 ”事件 中 添加 用 例 ， 如 图 5-82 所 示 。 
` 将 标记 面板 的 状态 设 为 已 完成 ， 看 起 来 就 像 用 户 单 击 待 办 事项 打 了 个 对 勾 。 

- 在 操作 数据 之 前 ， 设 置 一 个 500 毫 秒 的 等 待 动 作 ， 让 用 户 能 看 清 刚刚 的 打 多 动画 。 
从 “ 待 办 事项 ”中 删除 行 ， 在 “完成 事项 ”里 添加 行 。 


(6) 添加 行 的 内 容 ， 如 图 5-83 所 示 。 将 “ 待 办 事项 ”中 的 各 列 一 一 对 应 地 插入 “完成 事项 ”中 。 


设置 This 为 已 完 


等 待 500 
添加 行 1 为 完成 事项 
删除 行 This 从 待 办 事项 


图 5-82 用 户 打 勾 用 例 


RP p 漆 加 行 到 中 继 品 

content isstarred ischecked date isdued 
[ltem. eh fx [[ltem.isStarred fox [fltem.isCheck fx [[Item.date]] fx [[ltem.isDued]] fx 
pridl ee fx fx fx fx fx 


图 5-83 ”添加 行 的 内 容 


(7) 删除 行 的 设置 ， 如 图 5-84 所 示 。 由 于 是 在 中 继 器 内 元 件 的 触 友 事件 中 删除 行 ， 所 以 可 以 选择 This 单 选 授 钮 ， 意 为 删除 当前 行 。 


组 织 动作 配置 动作 
i Case1 选择 要 删除 行 的 中 继 器 . 
区 设置 This 为 已 完成 楷 沦 
多 等 竺 500 志和 4 外 框 (动态 面板 ) 
对 删除 行 This 从 待 办 事项 待 办 事项 (中 继 跑 ) This 
且 已 完成 (动态 面板 ) 


站 | 隐藏 未 命名 的 元 件 


辐 | 完成 事项 (中 继 盐 ) 


图 5-84 删除 行 1 


(8) 在 “完成 事项 ”中 的 标记 面板 上 添加 类 似 的 动作 ， 如 图 5-85 所 示 。 


pr ls 筷 标 里 击 时 
A Casel] 


设置 This 为 未 完成 


等 待 500 训 种 
添加 行 1 为 待 办 事项 
删除 行 This 从 完成 事项 


图 5-85 删除 行 2 
` 将 标记 面板 切换 为 未 完成 状态 。 
` 在 “完成 事项 ”中 删除 行 ， 在 “ 待 办 事项 ”里 添加 行 。 具 体 设置 这 里 不 再 珊 述 。 


(9) 将 矩形 和 “完成 事项 ”一 块 转换 为 动态 面板 ， 并 命名 为 “已 完成 ”。 将 状态 命名 为 “展开 ”。 复 制 “ 展 开 ” 状 态 ， 并 重 命 名 为 “ 收 起 ”.。 
将 “ 收 起 ”状态 中 的 中 继 器 删除 ， 如 图 5-86 所 示 。 


(10) 在 “ 收 起 ”状态 中 添加 一 个 热 区 ， 履 兰 算 形 。 在 热 区 “鼠标 单 击 时 ”事件 中 添加 动作 “设置 面板 ”状态 。 单 击 热 区 时 ，“ 已 完成 ”面板 切换 
到 “展开 ”状态 ， 如 图 ?-87 所 示 。 


待 办 列表 / State1 (Home) x 待 办 雪 项 (Home) 下 | 内 容 /有 期 限 (Home) 其 内容/ 正常 (Home) Xx 
| .| 


Eh 


概要 : 页 面 


》 坊 详情 (动态 面板 ) 
4 圭 待 办 列表 (动态 面板 ) 
A wm State1 
》 昌 待 办 事项 (中 继 露 ) 
4 编 已 完成 (动态 面板 ) 
4 本 展开 
24 轩 完成 事项 (中 继 器 ) 
4 吉 标记 (动态 面板 ) 
4 于 已 完成 
4 一 未 完成 
4 区 内 容 (动态 面板 ) 
4 一 正常 
A 本 有 期 限 
4 圭 星 标 (动态 面板 ) 
4 本 无 
4 一 有 


图 5-86 “已 完成 ”面板 


已 完成 / 收 起 (Home) x 已 完成 /展开 (Home) 其 | 待 办 列表 / State1 (Home) 关 符 办 事项 (Home) XX iw 
0 i | . 0 ， es 站 


OO. 
| 


w 交互 


十 添加 用 例 


4 "时 ” 电 标 单 击 时 
A Case1 
“时 ”鼠标 移入 时 
思 和 外 标 移出 时 


图 5-87 “ 收 起 ”状态 


(11) 在 “展开 ”状态 中 添加 一 个 热 区 ， 设 置 类 似 的 动作 。 单 击 热 区 时 ， “已 完成 ”面板 切换 到 “ 收 起 ”状态 。 这 样 残 实现 了 收 起 、 展 开 已 完成 列 
表 的 效果 ， 如 图 5-88 所 示 。 


已 完成 / 收 起 (Home) 已 完成 /展开 (Home) 待 办 列表 / State1 (Home) 待 办 事项 (Home) 


0 200 400 i600 800 1000 


s。 ”611 个 已 完成 任务 1 (RES 
Y 交互 
十 添加 用 例 


4 “ 鼠标 单 击 时 


A 起 Case1 


图 5-88 “展开 状态 


(12) 预 蜗 原型 ， 如 图 5-89 所 示 。 勾 选 竺 办事 项， 待 办 事项 即 移动 到 已 完成 列表 中 了 。 但 是 待 办 事项 原来 的 位 置 留 下 了 空 日 。 这 个 问题 可 以 通过 实 
时 更 新 已 完成 列表 的 位 置 来 解决 。 


(13) 每 次 添加 、 删 除数 据 时 ， 都 会 触 点 “每 项 加 载 时 ”事件 。 所 以 可 以 在 “每 项 加 载 时 ”事件 中 实时 更 新 已 完成 列表 的 位 置 。 添 加 一 个 动作 “ 移 
动 。 设 置 “ 移 动 已 完成 to (0，[[this.bottom+90]]) ”。this.bottom 是 待 办 事项 最 底部 的 y 坐 标 值 。 将 已 完成 移 到 this.bottom 即 可 保证 已 完成 列表 随 
时 “ 紧 跟 ” 待 办 事项 。 加 90 像 素 是 为 了 在 两 者 之 间 增 加 一 点 间 隅 ， 如 图 ?-90 所 示 。 


| 做 Wunderlist 诛 型 


| 做 yahoo weather 原型 


| 有 


611 个 己 完 成 任务 


图 5-89 预览 原型 


4 “四 每 项 加 载 时 


4 这 Case2 
(lf "[[ltem.isStarred]]’ == "1") 


多 设置 星 标 为 有 


二 Case3 
(lf [litem.isDued]] == 1 ) 


多 ”设置 内 容 为 有 期 限 


A 总 Case1 
(上 True) 
多 设置 文字 于 内 容 = "[[ltem.content]]", and 
文字 于 内 容 ( 限制 日 期 ) = 
[[Item.content]] ,and 


文字 于 日 期 = "[[Item.date]]" 
14 移动 已 完成 to (0,[[this.bottom+90]]) 


图 5-90 设置 移动 已 完成 动作 


(14) 再 次 预 抑 原型， 如 图 5-91 所 示 。 此 时 无 论 添 加 还 是 标记 “完成 列表 ”都 会 正常 显示 。 


二 收 件 箱 


司 Wunderlist 原 型 “| 做 airbnb 原 型 


打扫 房间 


明天 


做 yahoo weather 原 型 


做 airbnb 原 型 


611 个 已 完成 任务 


611 个 已 完成 任务 


打扫 房间 


a ) 添加 b ) 标记 完成 
图 5-91 预览 原型 


5.4.2 ”案例 14: Layout 图 片 编辑 


Layout 是 Instagram 公 司 友 布 的 一 于 拼图 工具 。 在 页 面 下 方 直接 单 击 图 片 库 中 的 图 片 ， 页 面 上 部 融会 直接 展示 拼图 效果 ， 如 图 5-92 所 示 ， 操 作 相当 
便捷 ， 交 互 效果 值得 学 习 。 


面孔 


图 5-92 ”Layout 拼图 


下 面 讲解 如 何 利用 中 继 器 实现 选择 图 片 进行 拼图 的 交互 效果 。 


1. 图 片 库 


(1) 摆好 手机 的 外 框 和 页 面 上 的 元 素 。 将 页 面 上 的 元 素 一 起 转换 为 动态 面板 ， 并 命名 为 “外 框 ”， 如 图 5-93 所 示 。 然 后 固定 动态 面板 的 大 小 。 


X 轴 坐标 ”y 轴 坐标 


0 0 
元 件 角度 。 文本 角度 


图 标 、 文 字 


4d 圭 外 框 (动态 面板 ) 
A ww statel 


图 5-93 ”外 框 


(2) 添加 中 继 器 ， 命 名 为 “图 片 库 ”， 如 图 5-94 所 示 。 在 图 片 库 中 添加 一 个 图 片 元 件 ， 高 度 和 宽度 都 设 为 页 面 的 1/3。 将 图 片 元 件 命名 为 “图 库 图 
请 ”。 


国 片 库 (Home) 检视 : 中 继 跨 
0 


pic Papa 
U=395922936,1 .85 
u=2105010697 es 
U=981586658， 上 本 
24b100OPIC8 _ 
U=3103763494 ss 
U=1287279346 a% 
U=2118939778, gs 
彩色 卡 .png ”上 晤 


1 
2 
3 
4 
5 
6 
7 
8 


[| Home 
4 如 外 框 { 动 态 面板 ) 
A state1 
4 旨 图 片 库 (中 悉 器 ) 
Ga 图 库 图 片 (图 片 ) 


图 5-94 图片 库 
(3) 在 数据 集中 添加 两 个 列 num 和 pic。num 是 序号 ，pic 列 的 每 行 导入 一 张 图 片 。 


(4) 在 中 继 器 “每 项 加 载 时 ”中 添加 动作 “设置 图 片 ”， 如 图 5-95 所 示 。 


4 时 每 项 加 载 时 


A 起 Case1 


4 设置 图 库 图 片 image to [[ltem.pic]] 


图 5-95 添加 “设置 图 片 ” 动 作 


(5) 设置 “图 库 图 片 ” 元 件 等 于 pic 列 中 的 图 片 ， 如 图 5-96 所 示 。 一 般 只 设置 Default 状 态 (默认 状态 ) 即 可 。 设 置 图 片 允 许 直 接 导入 指定 图 片 ， 也 
可 以 导入 “ 值 ”。 本 例 中 融 是 将 中 继 器 中 的 pic 列 作为 值 导入 到 元 件 中 的 。 


ep 用 例 纲 辑 < 每 项 加 戟 时 > 


用 例 名 称 |Case 1 | 
添加 动作 组 织 动作 配置 动作 
》 链接 | 4 caset 选择 要 设置 图 片 的 图 片 元 件 
4 元件 再 ”设置 图 库 图 片 mage to [lltem.pic]] 苗 奉 加 | 隐藏 未 命 名 的 元 件 
4 显示 / 隐 震 
显示 
隐藏 
切换 可 见 性 
设置 面板 状态 


看 外 框 (动态 面板 ) 
同 图 片 
十 | 图 片 库 (中 悉 跨 ) 
“| Set 国库 图 片 国 月 Defaut 为 Item pic] 


上 请 置 选中 
设置 列表 选中 项 
bb 启用 / 莹 用 
移动 
旋转 
设置 尺寸 
bb 和 置 于 顶层 /底层 
设置 个 透明 
获取 焦点 
bb 展开 / 析 县 树 节 点 
全 局 变量 
二 中 震中 


[LUtem.pic]] 


图 5-96 “配置 动作 


(6) 调整 “图 片 库 ” 的 样式 。 选 择 “水平 -网 格 排 布 ”， 如 图 ?5-97 所 示 。 由 于 刚才 将 图 片 的 尺寸 设置 为 页 面 的 1/3 宽 ， 所 以 每 排 项 目 数 设置 为 3， 刚 
好 能 将 页 面 填 满 。 


3) 竺 直 @, 水 平 
司 网 格 排 布 


征 排 项 目 数 |3 


图 5-97 设置 为 网 格 排 布 样式 


(7) 切换 到 “外 框 ” 面板 ， 将 中 继 器 “图 片 库 ” 放 在 合适 的 位 置 。 数 据 集中 设置 了 8 张 图 片 ， 每 行 3 张 ， 一 共 3 行 ， 刚 好 将 页 面 空白 填 满 ， 如 图 2-98 
所 泵 。 


外 框 /state1 (Home) 图 片 库 (Home) 检视 : 面板 状态 
308 


鼠标 单 击 时 
状态 改变 时 
拖 动 开始 时 
拖 动 时 
拖 动 结束 时 

向 去 拖 动 结束 时 
向 右 指 动 结束 时 
载 入 时 


we 
| 
“时 
“项 
“时 
“着 
时 
“时 


更 窜 囊 件 >>> 


| Home 
4 吉 外 框 ( 动 态 面板 ) 
二 国 state1 
站 旨 图 片 库 (中 继 器 ) 
sa 图 库 图 片 (图 片 ) 


图 5-98 ”在 中 继 器 中 预览 效果 


2. 拼 图 版 式 


在 图 片 库 中 选中 图 片 后 ， 在 页 面 顶 部 显示 拼图 效果 。 顶 部 展示 了 3 种 拼图 版 式 ， 分 别 是 4 格 、 横 向 和 纵向 。 当 选择 4 张 以 内 的 图 片 时 ， 图 片 将 以 选中 的 
先后 顺序 ， 显 示 在 拼图 中 。 当 选择 5 张 图 片 时 ， 拼 图 版 式 将 发 生变 化 ，4 格 变 成 5 格 。 下 面 介绍 具体 的 实现 方法 。 


(1) 用 图 片 元 件 摆 出 拼图 版 式 ， 如 图 ?-99 所 示 。 


外 框 / state1 [Home) 
0 154 308 462 
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图 5-99 ”拼图 版 式 


(2) 后 两 种 拼图 版 式 无 法 完整 显示 图 片 。 可 以 将 图 片 元 件 放 入 动态 面板 中 。 通 过 调整 动态 面板 的 大 小 ， 控 制图 片 的 显示 范围 ， 保 证 图 片 都 居中 显 
示 ， 两 张 图 片 各 占 一 半空 间 ， 如 图 5-100 所 示 。 


采 各 画 
a 图 
加 
| 
本 -| 
四 
a 
= 


图 5-100 横向 拼图 


(3) 将 4 格 版 式 的 4 张 图 片 转换 为 动态 面板 ， 命 名 为 “ 拼 ”。 在 “ 拼 ” 中 添加 两 个 状态 ,分别 命名 为 “4 图 ” “5 图 ”。 当 选择 4 张 以 内 的 图 片 时 ， 
用 “4 图 ”; 当选 择 5 张 图 片 时 ， 用 “5 图 ”， 如 图 5-101 所 示 。 


图 5-101 5 图 


(4) 设置 好 动态 面板 ， 并 将 图 片 分 别 命名 ， 结 果 如 图 5-102 所 示 。 


“拼图 ”面板 中 包含 3 种 拼图 版 式 ， 分 别 是 拼 、 坚 、 横 。 
“ 拼 ” 面板 中 包含 两 个 状态 “4 图 ” “5 图 ” , 


竖 “ 横 面板 各 自 只 包含 一 个 状态 。 


. 由 于 空间 不 足 ， 有 些 图 片 元 件 无 法 完整 显示 。 可 以 将 这 些 图 


片 元 件 转换 为 动态 面板 ， 


4 需 持 图 ( 动 专 面 板 ) 


以 便 控 制 显示 范围 。 


二 State1 
4 者 拼 (动态 面板 ) 
4 本 4 图 
名 4 图 1 (图 片 ) 
人 4 图 2 (图 片 ) 
(E 
(区 


全 98 4 图 3 (图 片 ) 
和 4 图 4 (图 卢 ) 


ii 本 5 后 
用 坊 (动态 面板 ) 
司 Statel1 


站 5 畏 2 (图 片 ) 
人 3 图 1 (图 片 ) 
全 图 3 (图 三) 
全 5 名 4 (图 三) 
的 5 图 5 (图 片 ) 
4 需 坚 (动态 面板 ) 
a Statel 


4 寺 (动态 面板 ) 


二 tatel1 
和 gg 尘 图 2 (图 片 ) 


人 至 图 1 (图 片 ) 
横 (动态 面板 ) 


图 5-102 “拼图 ”面板 的 结构 


3. 水 平 拖 电 
“拼图 ”面板 比 页 面 更 完 ， 如 果 想 在 原型 中 查看 拼图 面板 的 全 有 狗 ， 就 要 给 拼图 面板 增加 水 平抑 忠 效 果 ，。 


(1) 在 拼图 面板 “ 拖 动 时 ”事件 中 添加 动作 “移动 ”， 如 图 5-103 所 示 。 移 动 方式 选择 水 平 拖 动 ， 这 样 就 实现 了 水 平 拖 蝶 的 效果 。 


拼 /15 图 (Home) 到 | Statie1 (Home) 检视 : 动态 面板 


外 框 / state1 (Home) 樟 14 图 (Home) 
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A 时 Case1 
于 移动 This 水 平 拖 动 
4 对 ” 拖 动 结束 时 
4 Case1 
(lf "[[This.x]]” > "15") 
多 移动 This to (15,20) 控 控 500ms 


61 
| 
| 
; 4 因 拖 动 时 
| 
| 


A Case1 


(If "[[This.x]]" <= "[[360-15-590]]") 
及 移动 This to ([[360-15-590]],20) 摇 控 
500ms 


"时 ”向 左 拖 动 结束 时 


电 ”向 右 拖 动 结束 时 
嘱 载 入 时 


[| Home 
4 区 外 框 (动态 面板 ) 
A 有 State1 
》 坟 拼图 (动态 面板 ) 
》 9 图 片 库 (中 继 器 ) 


图 5-103 ”水 平抑 肋 


(2) 在 拼图 面板 “ 拖 动 结束 时 ”事件 中 添加 两 个 用 例 ， 分 别处 理 拖 遇 到头 时 自动 弹 回 的 效果 。 

. 第 一 个 用 例 的 条 件 是 面板 的 x 坐 标 大 于 初始 值 15。 “移动 ”动作 的 移动 方式 是 选择 “到 达 ”， 坐 标点 设 为 面板 的 初始 位 置 。 如 图 5-104a 所 示 为 面板 
向 右 拖 总 到 头 的 位 置 。 超 过 这 个 位 置 时 ， 弹 回 初 始 位 置 。 
度 减 去 面板 的 初始 位 置 再 减 去 面板 的 宽度 。 如 图 5-104b 所 示 为 面板 向 左 拖 息 到 头 的 位 置 。 超 过 这 个 位 


AP a 
钢 


` 第 二 个 用 例 的 条 件 是 面板 的 x 左边 小 于 页 面 筑 


置 时 ， 面 板 就 移动 回 到 初始 位 置 。 


a ) 回 右 到 头 b ) 向 左 到 头 


图 5-104 ”拼图 移动 的 边界 


4. 拼 图 


(1) 为 了 让 交互 逻辑 更 简洁 ， 在 原型 中 再 添加 一 个 中 继 器 ， 用 来 处 理 向 “拼图 ”面板 中 添加 、 删 除 图 片 的 逻辑 。 将 中 继 器 命名 为 “选中 图 片 ”， 如 
图 5-105 所 示 。 


(2) 在 “选中 图 片 ”中 继 器 中 不 添加 任何 元 件 。 它 是 一 个 纯粹 用 来 管理 数据 和 交互 逻辑 的 中 继 器 。 


(3) “选中 图 片 ”中 继 器 数据 集 列 与 “图 片 库 ” 中 继 器 的 数据 集 保 持 一 致 ， 让 二 者 间 的 数据 传递 更 方便 。 不 添加 初始 数据 ， 如 图 ?5-106 所 示 。 


图 5-105 “选中 图 片 ” 中 继 器 


num i NH) 
洲 力 三 


图 5-106 ”数据 集 


(4) 在 “图 片 库 ” 中 添加 一 个 动态 面板 ,命名 为 “选择 框 ”， 如 图 5-107 所 示 。 在 面板 中 添加 一 个 透明 答 形 和 一 个 勾 选 图 标 。 图 片 被 义 选 时 显示 该 
面板 。 


(5) 将 “选择 框 ” 设 为 隐藏 。 

(6) 在 “图 库 图 片 ”的 “鼠标 单 击 时 ”事件 中 添加 用 例 ， 如 图 5-108 所 示 。 
“ 单 击 图 片 时 ， 显 示 选 择 框 。 

` 显示 “拼图 面板 。 


将 该 图 片 添 加 到 “选中 图 片 ” 中 。 


图 片 库 (Home) 
0 80 


A “ 虹 鼠标 单 击 时 
A Case'1 


显示 选择 杠 逐渐 500 ms 
显示 托 图 回 左 滑 动 300 ms 
添加 行 1 为 选中 图 片 


图 5-108 “和 鼠标 单 击 时 ”用 例 


(7) 在 向 选中 图 片 里 添加 行 时 ， 需 要 添加 num 和 pic 两 个 列 的 数据 ， 如 图 5-109 所 示 。num 作 为 pic 的 索引 序号 ， 在 取消 选择 图 片 、 删 除 行 时 要 用 


Mu 
[[tem num]] fax [fitem.pie]] 


WT fx 


图 5-109 ”添加 行 


(8) 在 选择 框 “ 妃 标 单 击 时 ”事件 中 添加 用 例 ， 如 图 5-110 所 示 。 


4 “时 ”鼠标 单 击 时 
A 二 Case1 


多 ”隐藏 This 逐渐 500 ms 


5 删除 行 where 
[LTargetltem.num==ltem.num]| A 选中 医 


卢 


图 5-110 “和 鼠标 单 击 时 ”用 例 
` 单 击 选择 框 时 ， 取 消 图 片 的 选择 状态 ， 隐 藏 选择 框 面板 。 
从 选中 图 片 中 删除 该 图 片 。 
(9) 从 选中 图 片 中 删除 行 时 ， 用 两 个 中 继 器 的 num 列 是 否 相 等 作为 条 件 ， 如 图 5-111 所 示 。 
组 织 动 作 配置 动作 
4A Case1 选择 要 删除 行 的 中 继 器 . 


多 ”隐藏 This 逐渐 500 ms Ee 站 | 隐藏 未 命名 的 元 件 


多 删除 行 where 


"[[Targetltem_num==ltem num]]" 从 选中 图 片 选中 图 片 (中 继 器 ) where "[[Targetltem.num==ltem.num]]" 


用 外 框 (动态 面板 ) 
同 图 片 库 (中 继 器 ) 


图 条 件 【) 局 标记 


条 件 [[Targetltem.num==|tem.num]] 
格式 : [[ltem.XX == 'XX]] 例如 : [[ltem.age == '18]] 


图 5-111 删除 行 


(10) 在 选中 图 片 “ 每 项 加 载 时 ”事件 中 添加 5 个 用 例 。 用 例 间 的 关系 是 if..…...if..…..if..…..if..…..if..….. 每 当 添 加 行 、 删 除 行 时 ， 中 继 器 会 挨个 执行 这 些 用 
例 ， 如 图 5-112 所 示 。 


.Case1 用 来 将 “选中 图 片 ” 中 的 第 1 张 图 片 设 置 到 拼图 中 的 相应 位 置 上 。 
. Case2 用 来 将 “选中 图 片 ” 中 的 第 2 张 图 片 设置 到 拼图 中 的 相应 位 置 上 。 
Case3 用 来 将 “选中 图 片 ” 中 的 第 3 张 图 片 设 置 到 拼图 中 的 相应 位 置 上 。 
. Case4 用 来 将 “选中 图 片 ”中 的 第 4 张 图 片 设置 到 拼图 中 的 相应 位 置 上 ， 并 且 在 选中 4 张 图 片 时 ， 将 “ 拼 ” 面 板 的 状态 设 为 “4 图 ”。 


Case5 用 来 将 “选中 图 片 ” 中 的 第 5 张 图 片 设置 到 拼图 中 的 相应 位 置 上 ， 并 且 在 选中 5 张 图 片 时 ， 将“ 拼 ”面板 的 状态 设 为 “5 图 ”。 


4 R 每 项 加 载 时 


A Case1 
(lf "[[Item.index]]" == "1") 


区 设置 构图 2 image to [[ltem.pic]]， 
横 图 1 image to [[ltem.pic]], 
坚 图 2 image to [[ltem.pic]]， 
竖 图 1 image to [[ltem.pic]]， 
4 图 2 image to [[ltem.pic]], 

4 图 1 image to [[ltem.pic]]， 
4 图 4 image to [[ltem.pic]], 
4 图 3 image to [[ltem.pic]]， 
5 图 1 image to [[ltem.pic]] 


A Case2 A 起 Case4 
(If "[[Item.index]]" == "2") (If "I[Item.index]]" == "4") 


到 设置 横 图 2 image to [[ltem.pic]]， 区 设置 4 图 4 image to [[ltem.pic]], 
竖 图 2 image to [[ltem.pic]], 横 图 2 image to [[ltem.pic]]， 
4 图 2 image to [[ltem.pic]], 竖 图 2 image to [[ltem.pic]]， 
4 图 3 image to [[ltem.pic]], 5 图 4 image to [[ltem.pic]] 


5 图 2 image to [[ltem.pic 
了 多 设置 拼 为 4 图 
(If "[[Item.index]]" == "3") A 起 Case5 
设置 4 图 3 image to [[ltem.pic]]， (lf [Item.indexjj == "5") 


竖 终 1 image to [[ltem.pic]], 多 设置 5 图 5 image to [[ltem.pic]] 
檬 图 1 image to [[ltem.pic]]， 
5 图 3 image to [fltem.pic]] 多 设置 拼 为 5 图 


图 5-112 设置 图 片 
提示 : 


用 例 条 件 中 用 到 了 Item.index 变 量 ， 它 代表 该 项 对 应 数据 集中 的 第 几 行 。 例如， 选中 了 3 张 图 片 时 ， 数 据 集 中 有 3 行 数据 。 每 项 更 新 时 ， 前 3 个 用 例 的 条 
件 会 被 满足 ， 并 被 执行 ，“ 拼 图 ”面板 中 就 会 设置 3 张 图 片 。 


(11) 预览 原型 。 每 选择 或 取消 选择 一 张 图 片 时 ， 拼 图 区 域 都 会 发 生 相应 变化 ， 即 预览 拼图 效果 ， 如 图 5-113 所 示 。 


CJ 选 3 张 图 片 中 1 选 5 张 图 片 


图 5-113 ”预览 原型 


5.4.3 ”案例 15: 雅虎 天 气 


雅虎 天 气 是 一 款 设 计 相当 简洁 优雅 的 天 气 APP， 如 图 5-114 所 示 。 主 页 面 用 当地 风景 图 片 来 直观 地 表现 当地 的 天 气 情 况 ， 上 拉 展 示 详 细 的 数据 表格 和 
图 表 。 为 了 增强 可 读 性 ， 上 拉 过 程 中 背景 将 虚 化 ， 磊 右 滑动 可 切换 城市 。 切 损 过 程 中 ， 背 景 图 片 比 页 面 移动 速度 慢 一 半 ， 用 户 像 是 透 过 一 肩 窗 户 企 看 背景 
图 片 一 样 。 这 个 交互 动画 给 APP 增 加 了 动感 ， 也 展示 了 更 多 信息 。 


Ms TT A 


/ / 1/ 


能 见 度 24.00 公 电 


紫外 线 指数 弱 0 


a ) 主页 面 b ) 详细 数据 C ) 切换 城市 


图 5-114 雅虎 天 气 的 原型 
这 个 案例 利用 系统 变量 实现 了 复杂 的 交互 动画 ,读者 学 会 之 后 会 对 Axure RP 的 函数 和 变量 有 更 深入 的 理解 。 
1. 弹 性 列表 
(1) 在 画布 上 添加 元 件 ， 组 成 一 个 手机 过 形状 。 


(2) 因为 希望 交互 动画 只 友 生 在 手机 屏幕 之 内 ， 所 以 添加 一 个 动态 面板 ， 名 称 设 为 “外 框 ”， 固 定 外 框 的 大 小 ， 高 度 设 为 770 像 素 ， 如 图 ?-115 所 
示 。 后 面 的 所 有 元 件 都 添加 到 “外 框 ”面板 中 。 由 于 外 框 的 大 小 是 固定 的 ， 所 以 用 尸 只 能 看 到 外 框 可 视 范 围 内 的 交互 动画 。 
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5 | |133 
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, 4 硬 外 框 (动态 面 板 ) 


ml ‘Slate | 


图 5-115 ”外 框 


(3) 首页 展示 纽约 的 天 气 ， 在 “外 框 ”面板 的 State1 状 态 中 添加 一 个 动态 面板 ,命名 为 “纽约 ”， 如 图 5-116 所 示 。 


“在 “纽约 ” 面板 中 ， 直 接 添加 没有 “移动 ”效果 的 标题 栏 按 钮 、 文 字 和 背景 图 片 。 标 题 栏 区 域 高 度 大 概 为 75 像 素 。 


" 用 文字 元 件 和 图 标 组 成 温度 数字 、 天 气 图 表 。 将 这 些 元 件 转换 为 动态 面板 ,命名 为 “纽约 信息 ”。 


` 因为 不 布 望 在 拖 动 页 面 时 ， 


蛆 约 / Stata1 (Homs) 


纽约 信息 


育 票 图 片 


SH /Stats1 (Home) 


S08 


“纽约 信息 ”中 的 元 件 盖 住 标题 栏 ， 所 以 再 创建 一 个 动态 面板 ， 命 名 为 “信息 外 框 ”。 将 “信息 外 框 ” 移 动 到 标题 栏 下 
方 ， 并 将 高 度 手 动 调整 为 770-75=695 像 素 ， 刚 好 履 盖 从 标题 栏 底部 到 外 框 底 边 的 范围 。 剪 切 “ 纽 约 信息 ”， 然 后 将 其 粘贴 到 
息 ” 的 y 坐 标 设 为 425 像 素 ， 让 首页 刚好 露出 显示 温度 的 数字 即 可 。 这 样 ， 上 下 拖 动 “纽约 信息 ” 


“信息 外 框 ”中 。 将 “纽约 信 


面板 时 ， 会 逐渐 露出 天 气 表 格 ， 但 不 会 遮挡 标题 栏 。 
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| 0 | 和 ; 

XxX 轴 坐 奈 。 3 举 标 
0 旧 

元 性 和 朋 医 亡 中 前 度 
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[1 Home 
4 局 外 框 (动态 面板 ) 
直 国 Statel 
二 电 纽 的 【 动 赤 面板 ) 
双 面 State1 
| 坊 信息 外 框 ( 动 志 面 板 ) 
直 Statel 
二 坊 纽约 信息 (动态 面板 ) 
下 tate1 


图 5-116 “纽约 ”面板 


(4) 此 时 给 “纽约 ”面板 “ 拖 动 时 ”事件 中 添加 移动 动作 ， 如 图 5-117 所 示 ， 即 可 实现 拖 动 列表 的 效果 了 。 


(5) 在 “纽约 ”面板 “ 拖 动 结束 时 ”事件 增加 两 个 移动 动作 可 以 实现 “弹性 ”列表 的 效果 ， 如 图 5-118 所 示 。“ 纽 约 信息 ”面板 会 在 移出 可 视 范 围 


后 目 动弹 回 页面 边缘。 
-向 下 拖 动 “纽约 信息 ”面板 时 ， 最 下 方 的 范围 不 能 超过 它 的 初始 y 坐 标 425。 一 旦 超过 这 个 坐标 范围 ， 就 移动 回 425 像 素 。 


， 就 移 


纽约 信息 ”面板 时 ， 最 上 方 的 范围 不 能 超过 “信息 外 框 ” 面 板 的 高 度 减 去 “纽约 信息 ”面板 的 高 度 695-1220。 一 旦 超过 这 个 范围 


. 向 上 拖 动 “ 
动 回 695-1220。 


多 ”移动 纽约 信息 垂直 拖 动 


图 5-117 ” 重 直 滑动 


4 畏 拖 动 结束 时 


4 5 到 机 
(If "[[nyinfo.y]]" >= "425") 


多 ”移动 纽约 信息 to (0,425) 摇摆 


50UUms 


4 5 ”到底 
(Else If "[[nyinfo.y]]" < "[[695-1220]]") 


于 移动 纽约 信息 to (0,[[695-1220]]) 授 
押 500ms 


图 5-118 ” 弹 回 动作 


小 知识 : 
获取 元 件 的 y 坐 标 


图 5-118 中 的 条 件 里 有 一 个 变量 nyinfo.y， 表 示 “ 纽 约 信息 ”面板 的 y 坐 标 。 


(1) 在 “条 件 设立 ”对 话 框 中 选择 “ 值 ”， 如 图 5-119 所 示 。 


(2) 单 击 低 按 钮 ， 进 入 “编辑 文本 ”对 话 框 ， 如 图 5-120 所 示 。 


(3) 在 低 界 面 下 方 ， 添 加 局 部 变量 。 设 置 nyinfo 等 于 元 件 “ 纽 约 信息 。 


(4) 在 多 界面 上 方 输入 “[[nyinfo. 别 ”， 表 示 “ 纽 约 信息 ”的 y 坐 标 值 。 


hp 条 件 设立 


符合 全部。 ~| 以 下 条 件 。 |， 清除 全 部 


司 lInyinfo.y]) 


图 5-119 ”在 “条 件 设立 ”对 话 框 中 选择 “ 值 ” 


ap 编辑 文本 


量 "OnLoadVariable" 的 当前 值 ; 插入 表达 式 [[VarA + VarB]] 返 回 值 为 "VarA + VarB'" 的 和 ; 插入 [[PageName]] 返回 值 为 当前 页 面 名 
称 。 


| 在 下 万 创建 用 于 插入 人 x 的 局 部 变量 ， 局 部 变量 名 称 必 须 是 字母 、 数 子 , 不 允许 包含 空格 。 
j= i 


元 件 


图 5-120 “编辑 文本 ”对 话 框 


2. 背 景 虚 化 


Axure RP 中 没有 模糊 滤 镜 这 个 功能 。 背 景 虚 化 的 效果 只 能 用 取 巧 的 办 法 来 实现 。 


(1) 把 背景 图 片 转换 为 动态 面板 ， 命 名 为 “纽约 背景 ”。 


(2) 在 “纽约 背景 ”面板 中 添加 3 个 状态 State1 ~ state3， 如 图 ?-121 所 示 。 分 别 在 3 个 状态 中 添加 3 张 不 同 分 辨 率 的 图 片 。state1 中 放 最 清晰 的 图 
片 ，State3 中 放 最 模糊 的 图 片 。 


(3) 在 “纽约 ”面板 “ 拖 动 时 ”事件 中 添加 两 个 用 例 ， 如 图 5-122 所 示 。 
注意 ， 用 例 的 条 件 逻 辑 符 都 是 ff， 让 这 些 条 件 依 次 执行 。 


. DragY 表 示 纵 向 拖 彼 的 距离 。 如 果 向 下 拖 秽 ，DragY 为 正 数 ; 向 上 拖 秽 ，DragY 为 负数 。 向 上 拖 惫 时 “纽约 背景 ”面板 设置 为 前 一 个 清晰 的 状态 。 向 
下 拖 提 时 “纽约 背景 ”面板 设置 为 后 一 个 模糊 的 状态 。 


概要 : 页 大 
4 史 纽约 (动态 面板 ) 
A State1 
4 者 信息 外 框 (动态 面板 ) 
A Statel 
4 项 纽约 信息 (动态 面板 ) 


A Statel 

4 坟 纽约 背景 (动态 面板 ) 
A State1 
A vtate2 
A State3 


图 5-121 “纽约 背景 ”面板 


(If "TDragY]]" >= "0") 
及 ”移动 纽约 信息 垂直 拖 动 
多 设置 纽 八 背景 为 Previous 


框 宙 


(上 ff [LLDragr js 0) 
多 设置 纽约 背景 为 Next 


4d 可 拖 搜 
(lf True) 


多 移动 纽约 信息 垂直 拖 动 


图 5-122 ” 弹 回 动作 
小 向 识 : 
系统 变量 DragX 和 DragY 
DragX 和 DragY 是 Axure RP 的 两 个 系统 变量 ,分 别 记录 了 用 户 在 横向 和 纵向 拖 吕 的 距离 。 


如 图 5-123 所 示 ， 用 户 向 右 下 方 拖 昌 时 ，DragX 记 录 了 用 户 向 右 拖 迟 的 距离 ，DragY 记 录 了 用 户 向 下 拖 久 的 距离 。 


Dragy 


图 5-123 ”DrasX 和 DrasY 分 别 是 横向 和 纵向 拖 慢 的 距离 
3. 手 势 识别 
雅虎 天 气 原型 中 同时 包含 了 两 个 方向 的 拖 忠 一 一 左右 切换 城市 和 上 下 拖 动 列表 。 


如 果 原 型 中 只 包含 一 个 方向 的 拖 忠 ， 可 以 直接 在 “ 拖 动 时 ”事件 的 用 例 中 添加 “水 平抑 动 ” 或 “ 垩 直 拖 动 ” 动 作 。 同 时 包含 两 个 方向 的 拖 蝶 交互 ， 需 
要 先 在 “ 拖 动 开始 时 ”事件 中 计算 出 用 户 到 底 想 往 哪个 方向 拖 抱 。 然 后 根据 计算 结果 ， 再 在 “ 拖 动 时 ”事件 中 设置 移动 动作 。 下 面 给 出 了 一 种 计算 用 户 拖 
中 方向 的 万 法 。 


一 般 来 说 : 
` 如 果 用 户 想 左 、 右 滑动 页 面 时 ， 通 常 拖 撤 的 DragX 值 会 比 DragY 值 大 。 
` 如 果 用 户 想 上 、 下 滑动 页 面 时 ， 通 常 拖 慢 的 DragY 值 会 比 DtagX 值 大 。 


根据 这 个 原理 ， 可 以 在 “ 拖 动 开始 时 ”事件 中 添加 两 个 用 例 Case 1 和 Case 2， 如 图 5-124 所 示 。 


ftsajH 


Case 1 
(f [IDragx DragX]] =>= 
‘TT[DragY*DragY]]") 


多 设置 但 于 grag direction = "1 


dd eh Case2 
(Else 上 “[[DragX*DragX]] < 
[TIDrag DragY ]] ) 


多 设置 值 于 drag_direction = 坚 


图 5-124 Case1 和 Case2 的 设置 

. Case 1 设置 的 条 件 是 DragX 的 平方 大 于 DragY 的 平方 。 
如 果 这 个 条 件 成 立 ， 则 用 户 应 该 是 横向 左 、 右 滑动 页 面 。 这 里 设置 自 定 义 变量 drag direction 的 值 为 “ 横 ”。 

. Case 2 设置 的 条 件 是 DtagX 的 平方 小 于 DtagY 的 平方 。 
如 果 这 个 条 件 成 立 ， 则 用 户 应 该 是 纵向 上 、 下 滑动 页 面 。 这 里 设置 自 定 义 变量 drag direction 的 值 为 “ 竖 ”。 
这 样 就 判断 出 了 用 户 到 底 想 往 哪 个 方向 拖 遇 页 面 。 
jE: 

上 面 的 算法 中 没有 直接 比较 DragX 和 DragY 的 值 而 是 比较 二 者 的 平方 。 这 是 为 了 屏蔽 变量 正 负 号 的 干扰 。 也 可 以 比较 二 者 的 绝对 值 。 


拖 旨 时 ， 向 右 DfagX 为 正 ， 向 左 DfagX 为 负 ; 向 下 DragY 为 正 ， 向 上 DragY 为 负 。 


4. 视 差 滚动 


(1) 为 了 实现 城市 间 切 换 的 效果 ， 紧 贴 动态 面板 “纽约 ”的 右 侧 ， 建 立 一 个 结构 一 样 的 动态 面板 “北京 ”， 如 图 ?5-125 所 示 。 


Home * frame/State1(Home) * 
| 和 和 


图 5-125 “北京 ”面板 


(2) 因为 要 实现 育 景 图 和 页 面 以 不 同 的 速度 移动 的 效果 ， 所 以 动态 面板 “北京 ”中 的 背景 图 需要 事先 向 左 挪动 半 个 屏幕 宽度 的 距离 ， 坐 标 x 为 - 
237， 如 图 5-126 所 示 。 


北京 1 State1 [Home) = I 
北京 背景 


0 , 1303 


元 件 负 应 -文本 用 谨 


State1 


me ae ee 


pe [| Home 
直 里 外 框 (动态 面板 ) 
着 State1 
二 里 北京 (到 二 面板 ) 
避 大 Statei 
b> 志 北京 信息 { 动 志 面 板 ) 
》 硬 ”北京 背景 { 动 杞 面板) 
.二 担 约 (动态 面板 ) 
Stale1 
> 圭 信息 外 框 | 勒 态 面板 ) 
P| > 里 纽约 背 且 | 动态 面板 ) 


钾 昌 


图 5-126 ”背景 的 位 置 
(3) 根据 手势 识别 的 结果 ， 在 “纽约 ”面板 “ 拖 动 时 ”事件 中 ， 设 置 不 同 的 用 例 处 理 不 同 的 手势 ， 如 图 5-127 所 示 。 
在 背景 虚 化 的 两 个 用 例 的 条 件 中 添加 drag_direction 的 值 等 于 “ 竖 ”。 
- 新 添加 一 个 用 例 ， 条 件 是 drag_direction 的 值 等 于 “ 横 ”。 在 这 个 用 例 中 ， 添 加 4 个 移动 动作 。 
.水平 移动 “北京 ”和 “纽约 ”面板 ， 实 现 页 面 滑动 切换 的 效果 。 


北京 背 


景 ; 
果 ， 看 起 来 就 像 透 过 窗户 看 远 处 的 风景 一 样 。 


7 和 (44 纽约 背景” 面板 的 移动 方式 是 (4 经 过 ” x 值 设 为 [DragX/2]]。 以 1/2 的 速度 移动 (44 北京 背景 ” (44 纽约 背景 ” | 实 


牙 “ 旦 拖 动 时 
4d 于 清晰 
(lf [IDragYj] >= 0 
and 值 于 drag_direction == " 竖 站 
及 ”移动 纽约 信息 垂直 拖 动 


多 设置 纽约 背 最 为 Previous 


4 高 模糊 
(lf [IDragY jj < 0 
and 值 于 drag_direction == " 竖 站 


及 ”移动 纽约 信息 垂直 拖 动 
与 设置 纽约 背景 为 Next 


4 王 拖 搜 
(上 f 值 于 drag _ direction == " 杭 " 


多 移动 纽约 背景 by ([[-DragX/2]],0). 
纽约 水 平 拖 动 


北京 坦 员 


京 背景 by (I[-DragX/2]],0) 


图 5-127 “ 拖 动 时 ”事件 用 例 


提示 : 


案例 中 ， 先 让 页 面 (包括 背景 ) 以 1 倍速 度 移动 ， 再 让 冰 


9 最 以 1/2 的 速度 反 向 移动 。 两 个 速度 合 在 一 起 ， 最 终 可 以 看 到 背景 
移动 。 背 景 与 页 面 方向 相同 但 速度 不 同 ， 形 成 视差 。 


以 1/2 的 速度 与 页 面 同方 向 


(4) 在 “纽约 ”面板 “ 拖 动 结束 时 ”事件 中 ， 添 加 以 下 4 个 用 例 。 


. 修改 用 来 实现 弹性 列表 的 两 个 用 例 。 在 条 件 中 增加 drag_direction 的 值 等 于 “ 


- 添加 两 个 用 例 用 来 实现 横向 的 弹性 效果 。 如 果 拖 恤 页 面 的 距离 超过 页 面 宽 度 的 1/4 时 ， 则 切换 页 面 ， 将 


“纽约 ”面板 移 走 ， 将 “北京 ”面板 移 到 页 
面 中 央 。 如 果 拖 慢 页面 的 距离 小 于 页 面 宽 度 的 1/4 时 ， 则 让 各 个 面板 都 回 到 初始 位 置 。 


提示 : 


“北京 /纽约 背景 ”面板 处 于 “北京 /纽约 ”面板 之 内 。 设 置 “ 要 移动 到 ”的 坐标 时 ， 要 设置 在 “北京 /纽约 ”面板 之 内 的 坐标 ， 如 图 5-128 所 示 。 


(5) 到 这 一 步 ， 已 经 实现 了 “纽约 ”面板 的 视差 滚动 效果 。 在 “北京 ”面板 的 “ 拖 动 开始 时 ”“ 拖 动 时 ”“ 拖 动 结束 时 ”事件 中 分 别 创建 类 似 的 用 
例 ， 即 可 实现 “北京 ”面板 的 视差 滚动 效果 ， 如 图 5-129 所 示 。 由 于 设置 方法 完全 一 样 ， 在 此 不 再 元 述 。 


ER ” 拖 动 结束 时 
F -|i 


EA | 


and 让 a A = 二 二 |】 


多 秘 动 纽约 鸽 息 to (0.[[695- 12201]) 摇摆 
S00ms 


(If "[[This. x]] < [[-1d"474]] 
and 蛋 于 drag_ direction == " 恒 ") 


入 ”移动 纽约 to (-474.0) 摇摆 500ms， 
北京 to(0.0) 择 皖 500ms， 

弟 扣 青 景 t (0.0) 摇 控 500ms， 

组 约 背 景 to (237,0) 摇 近 500ms 


and 但 en == 侦 ) 

如 移动 北京 to (474.0) 择 择 500ms， 
北京 背景 to (-237,0) 摇摆 500ms， 
纽约 背景 to (0 0) 择 把 S00ms 
组 人 ] to (0,0) 探 摆 500ms 


图 5-128 “ 拖 动 结束 时 ”事件 用 例 


(If 值 于 drag direction == " 樟 ") 

多 榜 动 This 水 平抑 动 
北 更 下 景 by ([[-DragX/2]],0), 
组 约 背 景 by ([[-DragX/2]],0) 
细 约 by ([[DragX]],0) 

FP 坚 

(Else |f 值 于 drag direction == " 竖 ” 
多 移动 北京 信息 
4 中” 拖 动 结束 时 


4 本 移 走 
(If "This_x]]" >= "[[1/4*4741]") 
多 ”移动 This to (474.0) 摇摆 500ms， 
纽约 to (0,0) 摇 搜 500ms， 
北京 背景 tao (-237.0) 挥 控 500ms， 
纽约 背景 to (0,0) 摊 皖 500ms 
4 到 没 移 走 
(Else |f "I[This.x]y" < "[[1/4*474]]") 

多 ”移动 北京 to (0,0) 摇摆 500ms， 
绍 从 ] to (-474,0) 挥 控 500ms， 
纽约 背景 to (237,0) 摇摆 500ms， 
北京 背景 to (0,0) 摇 撑 500ms 


图 5-129 “北京 ”面板 的 事件 用 例 


(6) 预览 原型 。 左 、 右 拖 蝶 页 面 ， 页 面 的 背景 会 以 不 同 的 速度 移动 ， 如 图 5-130 所 示 。 


nv” Ws ,0% 
NE 

» VA i var Te 
pee 和 ww "0 or 


b ) 开始 移动 


d ) 移动 完成 


图 5-130 ”预览 原型 


Axure RP 可 以 制作 出 交互 效果 很 强大 的 原型 。 强 大 的 原型 往往 拥有 复杂 的 设置 和 代码 。 而 “复杂 ”可 能 会 带 来 如 下 问题 : 
` 交互 设置 太 复 杂 或 代码 太 多 ， 也 许 隔 一 段 时 间 再 看 ， 就 看 不 明白 了 ， 想 修改 原型 却 不 知道 应 该 修改 什么 。 
* 各 个 交互 动作 之 间 相 互 关联 ， 罕 一 发 而 动 全 身 ， 明 明和 修改 的 是 这 个 地 方 ， 其 他 地 方 却 莫名 其 妙 地 出 错 。 


为 了 避免 原型 复杂 到 难以 修改 ， 每 次 迭代 原型 时 都 要 注意 原型 的 “可 维护 性 ”。 


6.1 可 维护 性 


可 维护 性 是 软件 开发 中 的 一 个 概念 。 引 入 到 原型 制作 中 ，“ 可 维护 性 ”是 指 为 了 满足 新 的 需求 ， 而 理解 、 修 改 原型 的 容易 程度 。 


决定 原型 可 维护 性 的 有 两 个 因素 。 下 面具 体 讲解 。 


6.1.1 可 理解 性 


可 理解 性 是 指 通 过 查看 原型 的 设置 、 代 码 、 说 明 ， 来 了 解 原型 的 意图 、 功 能 、 操 作 的 容易 程度 。 可 理解 性 主要 体现 在 下 面 两 个 方面 。 
(1) 自己 理解 原型 


修改 原型 最 头痛 的 束 是 随 着 时 间 的 流逝 ， 以 前 的 理解 和 记忆 都 逐渐 消失 了 。 每 次 修改 或 增加 新 需求 时 ， 要 一 点 一 点 地 看 交互 设置 和 代码 来 回忆 当时 制 
作 的 场景 。 如 果 不 理解 ， 融 没 法 修改 。 要 让 自己 理解 原型 ， 应 该 给 元 件 、 用 例 、 变 量 等 添加 规范 的 命名 ， 人 在 这 些 天 键 点 上 唤起 自己 的 记忆 。 


(2) 团队 成 员 理 解 原型 


项 目 中 随时 会 友 生 意料 之 外 的 事情 。 团 队 中 成 员 可 能 会 休假 ， 或 临时 调 去 开发 男 一 个 项 目 中 。 为 了 让 其 他 人 能 顺利 地 “ 接 棒 ”， 必 须 保 证 原型 的 逻辑 
非常 清晰 ， 尽 量 遵循 团队 的 风格 和 习惯 。 而 且 ， 要 在 原型 中 适当 地 添加 说 明 或 者 流程 图 、 结 构图 。 理 想 状 态 下 ， 一 个 原型 应 该 是 清晰 易 懂 不 需要 解释 的 。 


6.2 5 命 
Axure RP 中 各 种 元 件 都 可 以 命名 。 页 面 和 模板 都 可 以 被 命名 ， 然 后 用 文件 夹 组 织 成 树 形 结构 。 规 模 比较 大 的 原型 中 ， 可 以 直接 按 名 称 搜索 元 件 、 


面 。 元 件 地 图 、 配 置 动 作 界面 中 可 以 设置 成 只 显示 已 命名 的 元 件 。Axure RP 以 名 称 为 基础 ， 建 立 了 一 套 “ 高 可 维护 性 ”的 组 织 管理 方法 ， 做 好 各 个 页 
面 、 模 板 、 元 件 的 命名 ， 这 套 方 法 才 会 友 挥 出 最 大 功效 。 


6.2.1 ”使 用 有 意义 的 名 称 


制作 原型 时 应 该 尽量 使 用 有 意义 的 名 称 为 元 件 命名 ,这样 下 次 看 到 时 才能 快速 理解 元 件 的 作用 。 如 果 元 件 命名 太 随 意 ， 如 图 6-1a 所 示 ， 过 一 段 时 间 
再 看 原型 ， 有 可 能 上 自己 都 看 不 下 去 了 。 改 为 有 意义 的 名 称 ， 团 队 中 的 其 他 同事 们 也 能 轻易 理解 各 元 件 ， 如 图 6-1b 所 示 。 


4 田 (中 继 器) 
| | 1111112121 (矩形 ) | ] 滑 块 (矩形 ) 


— 2(TS) -一 左边 绪 (水 平 线 ) 
A ”111 (矩形 ) A 说 明 (矩形 ) 
1 (水 平 线 ) -一 石 边线 (水 平 线 ) 


a) 随意 命 9p: b ) 有 意义 的 命 


图 6-1 元件 地 图 中 的 命名 


在 元 件 地 图 中 ， 可 能 看 这 个 问题 还 不 明显 。 在 交互 动作 的 代码 中 ， 元 件 有 没有 被 合适 地 命名 ， 其 代码 的 易 读 性 差别 很 大 ， 如 图 6-2 所 示 。 


4 “时 每 项 加 载 时 
着 到 Case1 


(lf True) 


肠 ” 设置 文字 于 1111112121 = 


[Item.eaolumno]] ,and 
文字 于 111 = "[[ltem.name]J" 


Case2 
(lf 值 于 Stpe >= "[[ltem.Column0]]") 


入 ”设置 选中 状态 于 1111112121 = 


"tye” 


Case 3 
(lf "[[ltem line]]” == "1") 


克 隐藏 1 


Case 4 
(If "[[ltem.line]]” == "2") 


4 时 每 项 加 载 时 


有 


图 6-2 ”交互 动作 代码 中 的 命名 


6.2.2 ”命名 规 沁 


Axure RP 中 ， 变 量 名 称 、 中 继 器 中 的 列 名 称 都 只 能 用 英文 字母 命名 。 软 件 开 友 中 ， 代 码 都 是 英文 的 ， 并 且 有 如 下 一 


借鉴 。 


` 尽量 使 用 英文 单词 来 命名 ， 因 为 汉语 拼音 可 能 有 歧义 。 


" 尽量 不 简写 ， 应 使 用 英文 单词 的 完整 拼写 ， 否则 可 能 有 歧义 。 


- 用 下 画 线 “-_ 
` 需要 分 隔 时 ， 将 单词 的 首 字 母 大 写 ， 其 他 字母 小 写 。 例 如 appId、usefName。 


. 表示 “是 或 否 ” 的 变量 可 以 加 前 级 is。 例 如 isMatrked、 isLogino 


Ga 
[而 


Lase 1 
(If True) 
多 设置 文字 于 涓 块 = 
"[[ltem.ColumnO]]', and 


叉 字 于 说 明 = "Tltem.name]" 


Lase 2 
(f 值 于 Stpe >= "[[ltem.Column0]]") 


及 设置 选中 状态 于 滑 块 = "true" 


CASEe 3 
(lf "[[Item-line] == "1") 


和 隐藏 右边 绪 


Case 4 
(lf "[[Item.line]]” == "2") 


光 隐藏 左边 绪 
b ) 有 意义 的 命名 


` 有 时 名 称 中 需要 用 多 个 英文 单词 才能 表达 清楚 ， 因 为 Axure RP 不 允许 用 空格 来 分 隔 单 词 ， 可 用 下 面 两 种 方法 分 隔 单 词 。 


» 


分 隔 。 例 如 app_id、uset_hame。 


6.2.3 ”页 面 的 命 


页 面 的 命名 应 该 是 便于 大 家 理解 的 ， 而 且 要 说 明 页 面 的 内 容 。 因 为 后 继 的 设计 师 会 沿用 原型 里 的 名 称 来 命名 UI 效果 图 。 之 后 的 流程 中 ， 程 序 员 会 在 


交流 中 也 会 使 用 这 些 名 称 。 如 果 页 面 命名 得 好 ， 团 队 也 更 容易 沟通 。 


页 面 的 名 称 中 可 以 添加 一 些 前 缀 ， 代 表 页 面 的 状态 。 例 如 


.TODO: 表示 还 没 做 完 的 页 面 。 


` FIXME: 表示 需要 修改 、 优 化 的 页 面 。 


. BACKUP: 表示 暂时 不 用 ， 用 来 备份 的 页 面 。 


些 命名 规则 ， 制 作 原 型 时 也 可 以 


6.3 ” 善 用 “ 况 明 ”功能 


Axure RP 中 可 以 使 用 “说 明 ” 功 能 ， 记 录 元 件 的 说 明 信 息 。 如 果 和 希望 记录 整个 原型 的 说 明 信 息 ， 可 以 新 建 一 个 页 面 ， 用 文字 、 表 格 元 件 记 录 ， 或 
用 “流程 图 ”元 件 以 流程 图 或 结构 图 的 形式 记录 。 


6.3.1 元 件 的 “启明 " 


元 件 的 “说 明 ” 对 可 理解 性 很 重要 。 一 个 有 用 的 元 件 阅 明 ， 应 该 写 明 元 件 的 作用 及 用 途 。 在 原件 的 “属性 ” 检 符 和 “样式 ”标签 旁边 融 是 “说 明 ” 标 
答 ， 如 图 6-3 所 示 。 图 6-3 中 的 “说 明 ” 和 “新 增 字 段 ”是 “说 明 ” 的 两 个 字段 。 


单 击 “ 目 定义 字段 ”按钮 ， 在 弹出 的 对 语 框 中 可 以 添加 或 删除 字段 ， 如 图 6-4 所 示 。 使 用 “上 自 定 义 字段 ”功能 可 以 根据 需求 定制 “说 明 ” 界 面 。 


np 元 件 说 明 字 段 与 配置 


配置 


编辑 : 选项 列表 
输入 值 :每 行 一 个 


图 6-4 自 定义 字段 


6.3.2 ”对 五 个 原型 的 “ 况 明 


在 原型 的 站 点 地 图 首页 ， 可 以 为 整个 原型 添加 “说 明 ”， 如 图 6-5 所 示 。 在 这 个 页 面 中 解释 原型 的 主要 内 容 ， 以 及 如 何 使 用 这 个 原型 。 另 外 ， 还 可 以 
在 “说 明 ” 中 提供 制作 者 的 联系 方式 ， 以 方便 与 团队 其 他 成 员 沟 通 。 


如 何 使 用 。 x | 添加 活动 ” x | 游戏 活 章 模板 x | 客户 端 x 


300 400 |500 
3 A i a ee | st HE NE EC Es Te A i EH A 


负责 人 内 容 


台 2017.6.22 蕊 jjituo@yogee.cn 添加 活动 模块 
* OD EPS | 


门 如 何 接 入 
口 积分 设置 


概述 
豪杰 会 员 营 销 系统 是 一 个 面向 商户 的 会 员 系统 。 包 括 商户 、 会 员 的 信息 管理 ， 及 优惠 券 、 游 戏 活动 
等 商户 常用 的 会 员 营 销 工具 。 
主要 页 面 以 原型 中 的 交互 为 主 。 
原型 中 不 明确 的 地 方 请 参考 文档 或 直接 找 我 沟通 。 


制订 刷机 两 达 工人 网 得 
CES ELH A 
LLLESL BE 
网 > 


图 6-5 说明 页 


6.3.3” 结 构图、 流程 图 


在 原型 中 ， 可 以 添加 介绍 原型 整体 的 结构 图 、 流 程 图 ， 以 便 读者 可 以 清楚 地 看 到 产品 的 整体 设计 思路 ， 更 容易 理解 产品 结构 和 功能 流程 。 


Axure RP 中 默认 种 有 结构 图 、 流 程 图 的 元 件 库 为 Flow 元 件 库 ， 如 图 6-6 所 示 。Flow 元 件 库 中 包含 了 20 多 种 常用 的 元 件 。 


如 图 6-7 所 示 为 一 个 拉 述 积分 史 换 流程 的 流程 图 。 


丘 哩 半圆 形 


二 


椭 图 形 六 边 形 


E EF 最 r- 2 时 四 
ll 
| | 


数据 库 页 面 快照 


元 件 库 


二 角形 


平行 四 边 开 


Se 
图 片 


图 6-6 ” Flow 元 件 库 


图 6-7 流程 图 


在 流程 图 中 ， 通 常用 不 同 的 图 形 代表 不 同 的 含义 。 
. 矩形 : 代表 流程 中 的 “步骤 ”。 
蓉 形 : 代表 条 件 判 断 。 
椭圆 形 : 代表 流程 的 起 始 和 终止 。 
2. 结 构图 
结构 图 常用 来 表示 产品 的 信息 架构 和 页 面 逻 辑 。 通 常用 不 同 的 图 形 代 表 不 同 的 含义 。 
` 天 形 : 代表 各 个 页 面 。 
` 线 : 连接 各 个 页 面 ， 代 表 页 面 的 访问 路 径 。 


如 图 6-8 所 示 为 一 个 新 闻 平 台 的 信息 结构 图 。 


| 钢 频 十 情 | 专题 介绍 | 直播 详情 | 资讯 详情 | 


| 全 屏 播 放 | 发 表 话 题 | 


图 6-8 ”结构 图 
提示 : 
(1) 结构 图 上 ， 页面 名 称 最 好 与 原型 的 站 点 地 图 中 的 页 面 名 称 对 应 。 


(2) 可 以 在 矩形 元 件 上 添加 “动作 ， 通 过 单 击 各 元 件 跳 转 至 各 页 面 ， 这 样 查看 原型 更 方便 。 


6.4 结构 规划 


在 制作 原型 前 ， 最 好 移 规 划 好 原型 的 结构 ， 为 将 来 的 修改 预 留 空间 。 在 制作 过 程 中 ， 应 该 随时 调整 结构 ， 保 持 结构 简单 清晰 ， 易 于 理解 。 


64.1 “原型 结构 一 选择 “页 面 " 或 “动态 面板 
在 动手 制作 原型 之 前 就 要 考虑 : 原型 的 各 个 页 面 用 “页 面 ”， “动态 面板 ”来 做 ? 


` 如 果 页 面 比较 多 ,而 且 制 作 的 是 网 站 原型 ， 那么 最 好 在 站 点 地 图 中 添加 多 个 页 面 来 实现 原型 ， 


.如果 页 面 切 换 的 交互 比较 多 、 比 较 复 杂 ， 可 以 考虑 用 动态 面板 来 实现 原型 ， 


方便 地 传送 数据 。 交 互动 画 可 以 通过 “设置 面板 状态 ”来 实现 。 唯 一 的 缺点 是 如 页 面 较 多 ， 


面 4] 多 
4 |[] 苞 善 项 目 2 
4 | ] 项 目 详情 
4 | ] 跑步 准备 
4 | ] 跑步 
中 详情 


| 苞 矢 项 目 ( 继续 ) 
1 跑 团 
L] 我 的 
中 登录 /注册 


图 6-9 


6.4.2 ”减少 重复 的 动作 和 数据 


1 .减少 重复 的 动作 


重复 是 可 维护 性 的 大 敌 。 当 意识 到 有 相同 的 动作 重复 出 现时 ， 结 构 规划 时 应 该 尽量 思考 是 


例如 : 


" 用 例 1， 和 包括 动作 A 和 动作 C。 


-用例 2， 包 括 动作 B 和 动作 C。 


Ts 
Lr Ba 
kb 


. Ba 
> 有 
5 三 
- Bi 


原型 疆 吉 构 


如 图 6-9b 所 示 。 


如 图 6-9a 所 示 。 


则 预览 原型 时 加 载 速度 会 比较 慢 。 


慨 雪 : 由 和 面 
4d 堵 frame (动态 面板 ) 


苞 善 项 目 
瓯 蔷 项 目 详情 
跑步 准备 
跑步 中 

跑步 结束 
跑 团 
邀请 加 入 
创建 包 团 

加 入 跑 团 
赔 加 | 设置 


b ) 动态 面板 状态 


否 将 这 个 动作 抽出 来 ， 只 写 一 次 。 


用 例 1 和 用 例 2 都 包含 了 动作 C。 如 果 分 别 在 两 个 用 例 中 都 有 这 个 动作 ， 修 改 时 会 比较 麻烦 。 一 旦 只 修改 了 一 个 ， 瑟 了 修改 另 一 个 ， 融 可 


竞 的 错误 。 


能 造 


成 难以 察 


“动态 面板 ”中 的 一 个 状态 就 是 一 个 页 面 。 状 态 间 可 以 


2 


-J~ 


比较 好 的 办 法 是 : 新 建 一 个 用 例 3。 去 掉 用 例 1、2 中 的 动作 C， 将 动作 C 添 加 到 用 例 3 中 。 用 例 3 的 条 件 可 以 设 为 if true。 让 用 例 1 和 用 例 2 执 行 之 后 都 
会 执行 用 例 3。 这 样 ， 交 互 效果 没 变 ， 但 是 以 后 动作 C 只 需 在 一 处 修改 即 可 ， 可 维护 性 提高 


2. 减 少 重复 的 数据 


原型 中 ， 常 有 一 些 数据 (如 数字 、 文 本 、 日 期 等 格式 ) 要 在 多 处 用 到 |。 


这 些 数据 一 旦 需要 修改 ， 融 要 挨个 


页 面 进行 便 找 ， 很 容易 漏 挥 。 


如 果 这 个 数据 比较 重要 ， 可 以 在 “页 面 加 载 时 ”事件 中 创建 一 个 变量 ， 用 “设置 变量 值 ”动作 将 数据 赋值 给 变量 。 需 要 用 到 数据 时 ， 不 直接 填写 ， 而 
是 使 用 变量 。 这 样 ， 当 需要 修改 数据 时 ， 和 直接 在 一 处 修改 即 可 ， 避 免 了 漏 改 、 筷 改 的 情况 。 


6.4.3 ”分割 用 例 

原型 中 应 该 尽量 将 用 例 分 割 开 。 让 每 个 用 例 只 负责 一 个 功能 。 一 个 用 例 内 的 动作 不 要 过 多 。 如 果 一 个 用 例 有 超过 20 个 动作 ， 那 么 这 个 用 例 基本 上 是 
不 可 理解 的 。 

分 割 用 例 的 一 个 办 法 是 将 一 些 动 作 放 在 目标 元 件 中 。 例 如 

(1) 对 动态 面板 的 操作 ， 可 以 将 “动作 ”设置 在 动态 面板 的 “状态 改变 时 ”事件 中 。 

如 想 对 动态 面板 进行 操作 时 ， 使 用 动作 “设置 面板 状态 ”， 该 面板 的 “状态 改变 时 ”事件 就 会 被 触 友 ， 进 而 执行 动作 。 

(2) 对 中 继 器 的 操作 ， 可 以 将 “动作 ” 设置 在 中 继 器 的 “每 项 加 载 时 ”事件 中 。 

如 果 想 对 中 继 器 进行 操作 时 ， 只 要 使 用 动作 “添加 行 ”或 “更 新 行 ”， 中 继 器 的 “每 项 加 载 时 ”事件 融会 被 触 友 ， 进 而 执行 动作 。 


这 样 设置 ， 不 但 避免 了 用 例 中 动作 过 多 ， 而 且 查 找 起 来 也 更 方便 。 


6.5 ”案例 16: Flappy Bird 游 戏 案 例 


游戏 中 的 交互 动画 通常 比 APP、 网 站 的 交互 动画 多 。 只 要 有 合理 的 规划 ，Axure RP 也 可 以 制作 出 非常 复杂 的 游戏 原型 。 


下 面 以 一 款 火 遍 全 球 的 游戏 Flappy Bird (如 图 6-10 所 示 ) 为 例 ， 讲 解 如 何 规 划 、 制 作 复杂 的 原型 。 


FlappyBird 


b ) 飞行 


图 6-10 ”Flappy Bitd 游 戏 


6.5.1 ”原型 规划 


1. 结 构 规划 


游戏 中 交互 动画 比较 多 ， 所 以 原型 应 该 用 “动态 面板 ”来 实现 ， 将 不 同 的 页 面 放 在 不 同 的 状态 中 。 游 戏 的 开始 页 面 、 游 戏 页 面 、 结 束 页 面 上 的 元 素 关 
别 较 小 。 所 以 ， 可 以 考虑 在 一 个 状态 中 ， 通 过 控制 不 同 元 件 的 隐藏 和 显示 样式 来 表示 页 面 的 切换 ， 这 样 能 做 出 更 细腻 的 转 场 效 果 。 


2. 动 作 规划 


游戏 中 ， 能 “ 动 ”的 元 件 很 多 ， 如 果 把 动作 放 在 一 块 ， 会 市 来 不 好 理解 的 问题 ， 而 且 难 以 修改 。 所 以 ， 应 该 把 动作 分 散人 在 各 个 元 件 中 。 小 乌 飞 行 的 动 
作 融 放 在 小 乌 元 件 中 ， 地 面 、 管 道 移动 的 动作 也 分 别 放 在 各 目的 元 件 里 。 


6.5.2 开场 


下 面 制作 开场 部 分 ， 包 括 游戏 背景 、 开 始 按 钮 等 。 游 戏 的 图 片 素材 可 以 从 本 书 附 市 的 案例 文件 中 获取 。 


(1) 添加 图 片 元 件 ， 将 元 件 一 起 转换 为 动态 面板 ， 命 名 为 “外 框 ”， 如 图 6-11 所 示 。 游 戏 中 ， 管 道 、 地 面 都 会 超出 页 面 范围 ，“ 外 框 ”面板 是 用 来 
控制 显示 范围 的 。 


FlappyBird > : | 检视 : 动态 面板 


FlappyBird es 
十 添加 用 例 o> 创建 连接 
号 ”鼠标 单 击 时 
“时 ”状态 改变 时 
时 ” 拖 动 开始 时 
号 ” 拖 动 时 
嘱 拖 动 结束 时 


概要 : 页 面 
| | FlappyBird 
4 里 外 框 (动态 面板 ) 
4 Statel 


图 6-11 “外 框 ” 面 板 


(2) 将 页 面 上 的 元 件 各 目 转 换 为 动态 面板 ， 如 图 6-12 所 示 。 随 着 开场 动画 ， 这 些 元 件 会 消失 或 改变 状态 。 将 开始 按钮 命名 为 “开始 ”， 将 排名 按钮 
命名 为 “排名 ”。 


(3) 在 “开始 ”按钮 的 “鼠标 单 击 时 ”事件 中 添加 动作 “隐藏 动作 ”， 将 “标题 、 排 名 、 开 始 、 记 分 牌 ” 设 为 隐藏 ， 如 图 6-13 所 示 。 


外 框 1/ State1 (FlappyBirdj X FilappyBird : 检视 : 面板 状态 
0 lz00 | 


标题 天 四 Li 
加 十 添加 用 例 。 ”wm 创建 连接 
思 鼠标 单 击 时 
| EE 
记分 牌 (已 隐藏 ) 人 
小 乌 本 嘿 ” 拖 动 开始 时 
嘱 拖 动 时 


嘱 _ 拖 动 结束 时 
it 


要 要: 由 面 
gs : [| FlappyBird 
地 面 一 上 - 生 4 时 外 民 动态 面板 ) 
BU | a i 
开始 。 排名 dada 
》 晶 标题 (动态 面板 ) 
> 量 小 乌 (动态 面板 ) 
>》 壤 地面 (动态 面板 ) 


图 6-12 ”转换 为 动态 面板 


图 6-13 设置 隐藏 样式 


6.5.3 ”背景 移动 


让 背景 “向 后 ”移动 ， 可 以 创造 出 小 鸟 “ 向 前 ”飞行 的 感觉。 本 例 中 的 背景 包括 管道 和 地 面 。 依 照 规划 ， 下 面 将 移动 动作 设置 在 管道 和 地 面 上 。 


(1) 先 摆 好 素材 ， 如 图 6-14 所 示 。 


. 在 面板 上 添加 上 、 下 管道 图 片 ， 然 后 一 起 转换 为 动态 面板 ， 并 命名 为 “管道 ”。 注 意 上 下 管道 之 间 的 距离 。 本 例 中 的 距离 设 为 200， 


倍 身高 。 管 道 间 距 越 短 ， 越 难以 控制 小 鸟 通过 ， 游 戏 难度 越 高 。 


度 。 


和 


` 延长” 地面” 的 宽度 ， 使 其 超过 页 面 


(2) 在 “管道 ”“ 地 面 ” 面 板 中 复制 状态 ， 让 两 个 面板 都 拥有 相同 的 状态 ， 如 图 6-15 所 示 。 


(3) 在 “地 面 ”面板 的 “状态 改变 时 ”事件 中 添加 动作 “移动 ”， 如 图 6-16 所 示 。 移 动 分 两 步 


` 第 1 步 ， 将 地 面 移动 到 初始 位 置 。 


“ 第 2 步 ， 将 地 面 移 动 到 地 面 右 边缘 与 页 面 右 边缘 重合 的 位 置 。 这 个 移动 动作 要 设置 “线性 ”动画 ， 让 用 户 看 清 移动 的 过 程 。 


提示 : 


两 步 合 起 来 的 效果 是 一 一 地 面 瞬间 移 到 右 侧 ， 然 后 再 慢 慢 移 到 左 侧 。 如 果 不 断 重复 执行 这 两 个 动作 ， 就 可 以 实现 地 面 不 断 移动 的 效果 。 


大 约 为 小 鸟 的 4 


308 | 154 


= 


| 


154 


308 


图 6-14 设计 管道 和 地 面 效 果 


4 如 地 面 ( 动 态 面板 ) 
A State' 


A State2 
4 需 管道 (动态 面板 ) 
A 国 >tate1 


A BB 忆 ta 认 二 


4 “四 状态 改变 时 
4A 二 Case1 
多 ”移动 地面 to (0,480) 
b 面 to (-28,480) 线性 


(4) 在 “开始 ”按钮 的 “鼠标 单 击 时 ”事件 中 添加 “设置 面板 状态 ”动作 ， 如 图 6-17 所 示 。 将 地 面 面 板 设 为 “下 一 个 ”状态 ,并 且 每 500 毫 秒 循环 
一 次 ， 即 让 地 面 每 500 毫 秒 切 换 一 次 状态 。 每 次 切换 状态 时 都 会 执行 上 一 步 中 设置 的 移动 动作 。 这 样 束 实现 了 地 面 面 板 不 断 向 后 移动 的 效果 。 


(5) 同样 ， 在 “开始 ”按钮 的 “鼠标 单 击 时 ”事件 中 设置 “管道 ”面板 每 500 富 秒 切 换 一 次 状态 ， 如 图 6-18 所 示 。 注 意 这 里 可 以 勾 选 “ 首 个 状态 延 
时 500 毫 秒 后 切换 ” 复 选 框 。 让 地 面 先 动 ， 管 道 再 出 现 ， 让 动画 变 得 更 有 层次 。 


(6) 在 “管道 ”面板 的 “状态 改变 时 ”事件 中 添加 两 个 动作 ， 如 图 6-19 所 示 ， 与“ 地面” 面板 类 似 ， 其 中 ， 一 个 移动 动作 控制 移动 动画 的 过 程 ， 另 
一 个 移动 动作 控制 瞬间 复位 。 


4 车 鼠标 单 击 时 
首 瑟 Case1 
入” 隐 若 标题 


排名 ， 
如 
i 记分 
多 设置 地 面 为 Next wrap 循环 卓 
隔 500 军机 


图 6-17 “状态 改变 时 


[机 x 


二 
em ma i 


a | TE VHT) 
下 | 记分 牧 (动态 面 恢 ) 
全 | 得 分 (动态 面板 ) 
四 | 标题 (动态 面板 ) 
四 | 小 乌 (动态 面 概 ) 
Set 地 面 (动态 面板 ) state to Next wrap 箱 环 同 陋 500 : 
[VY Set 管道 (动态 面板 ) state to Next wrap 循环 间隔 500 ; 


«Co | 
选择 状态 | Next 
区 ] 回 后 循环 
循环 间隔 500 率 种 
首 个 状态 延 时 500 毫 种 后 切换 


进入 动画 无 -| 时间 500 毫秒 
二 出 动 国 元 ”| 时 间 500 ”毫秒 


司 如 果 降 藏 则 显示 面板 
占 推动 /拉动 元 件 


图 6-18 设置 面板 状态 


“时 ”状态 改变 时 


A Case1 


及 移动 This by (-28,0) 线性 500ms 
及 移动 This to (360,-180) 


图 6-19 “状态 改变 时 ”事件 用 例 


6.5.4 ”飞行 控制 


小 鸟 的 动作 比较 复杂 ， 但 是 可 以 分 解 为 几 个 简单 的 动作 一 一 小 鸟 担 打 想 膀 、 小 鸟 掉 落 、 扣 击 屏幕 时 小 鸟 向 上 飞 。 
1. 小 鸟 担 打 诸 膀 


小 鸟 扣 }#J 逆 膀 需 要 多 张 素 材 轮 播 来 实现 。 依 照 规 划 ， 轮 播 动作 应 该 设 在 小 鸟 面板 上 。 


(1) 找到 小 鸟 飞行 的 素材 。 在 “小 鸟 ”面板 中 添加 4 个 状态 ， 每 个 状态 中 添加 一 个 小 鸟 的 图 片 ， 如 图 6-20 所 示 。 


地 当当 学 
| | 


State1 State2 State3 State4 


小 鸟 (动态 面板 ) 


a State1 


State2 


mu 
ma State3 
es 


State4 


图 6-20 ”状态 改变 时 
(2) 在 “开始 ”按钮 的 “鼠标 单 击 时 ”事件 中 添加 “设置 面板 状态 ”动作 。 设 置 “ 小 鸟 ”面板 每 隔 100 宫 秒 切 换 一 次 状态 ， 如 图 6-21 所 示 。 
提示 : 
小 鸟 。， 面板 每 100 毫 秒 切 换 一 次 。 管 道 和 地 面 为 每 500 毫 秒 切 换 一 次 。 小 鸟 拍打 翅膀 的 频率 高 一 些 ， 动 画 会 更 自然 。 


(3) 如 果 希 望 在 游戏 开始 前 小 鸟 就 保持 动态 的 ， 可 以 在 “小 鸟 ”面板 的 “ 载 入 时 ”事件 中 添加 动作 ， 让 面板 循环 切换 状态 ， 如 图 6-22 所 示 。 


4 “四 鼠标 单 击 时 


i 


设置 小 乌 为 Next wrap 循环 间隔 100 宇 秒 delay first change， 
车 迫 为 Next wrap 循环 间隔 500 上 毫秒 delay first change， 
地 面 为 Next wrap 循环 间隔 500 宇和 窗 


图 6-21 “鼠标 单 击 时 ”事件 用 例 


A Case1 


入 设置 小 乌 为 Next wrap 循环 间隔 100 坚 
i delay first change 


图 6-22 “ 载 入 时 ”事件 用 例 


2. 小 鸟 掉 落 
小 鸟 在 自然 状态 下 会 掉 落 ， 在 点 击 屏 幕后 会 上 升 。 要 实现 这 个 效果 ， 需 要 设置 一 个 变量 来 区 分 小 鸟 当前 处 于 什么 状态 。 


(1) 添加 全 局 变量 jsdrop， 如 图 6-23 所 示 。isdrop 等 于 1， 表 示 小 鸟 处 于 下 沙 状 态 ; isdrop 等 于 0， 表 示 小 鸟 处 于 上 升 状态 。 
(2) 在 “开始 ”按钮 的 “鼠标 单 击 时 ”事件 中 添加 动作 设置 jsdrop 的 默认 值 为 1。 


(3) 在 “小 鸟 ” 面 板 的 “状态 改变 时 ”事件 中 添加 两 个 用 例 ， 如 图 6-24 所 示 。 


创建 全 局 变量 用 于 浏览 器 中 页 面 切换 时 存储 数据 。 如 果 在 IE 浏 昂 器 浏 响 原型 , 推荐 使 
用 25 个 或 更 少 的 变量 。 
变量 名 必须 是 字母 数字 ， 少 于 25 个 字符 ,并且 不 能 包含 空格 。 


x 
isdrop 


图 6-23 ”添加 变量 isdrop 


4A 状态 改变 时 
到 下落 


(lf 但 于 isdrop == "1") 


吕 上 逢 
(If 值 于 isdrop == "0") 


图 6-24 “状态 改变 时 ”事件 用 例 
用例“ 下落 ”的 条 件 为 设置 isdrop 等 于 1。 
用例“ 上 升 ”的 条 件 为 设置 isdrop 等 于 0。 
(4) 在 “下 落 ” 用 例 中 添加 两 个 动作 ， 如 图 6-25 所 示 。 


. 用 “旋转 ”动作 实现 小 鸟 下 落 时 “低头 ”的 动画 。 “旋转 ”方式 选择 “到 达 ”。 “角度 ” 设 为 90” ， 让 小 鸟 的 头 朝 下 。 “动画 ”设置 为 “缓慢 进 


入 ”， 让 人 感到 小 鸟 是 越 掉 越 快 的 。 


提示 : 


“旋转 ”有 两 种 方式 ， 分 别 是 “到 达 ”和 “经 过 。 这 两 种 方式 的 含义 与 移动 方式 类 似 ，“ 到 达 ” 表示 达到 某 个 绝对 的 值 ，“ 经 过 ”表示 要 旋转 的 相 
对 角度。 


旋转 还 可 以 设置 锚 点 位 置 ， 旋 转 时 以 锚 点 为 中 心 而 转 。 


-用 “移动 ”动作 实现 小 鸟 的 下 落 。 因 为 这 个 动作 设置 在 “状态 改变 时 ”事件 中 。 “小 鸟 ”， 面板 每 100 毫 秒 改 变 一 次 状态 。 所 以 ， 移 动 动作 中 设置 的 
距离 为 小 鸟 在 100 毫 秒 内 走 过 的 距离 。 本 例 中 设 为 30， 小 于 小 鸟 的 身高 。 这 里 还 可 以 设置 边界 ， 保 证 小 乌 不 会 掉 出 屏幕 可 视 范 国 。 


(lf 值 于 isdrop == "1") 
时 旋转 小 乌 to 90 deg 组 但 进入 100ms 
clockwise anchor center 排名 (图 片 ) 
> 日 人 
A lz] 小 鸟 (动态 面板 ) to 90 deg 缓慢 进入 100ms clockwise 
切换 可 见 性 点 击 区 域 ( 热 区 ) 
设置 面板 状态 z 4 国 地面 (动态 面板 ) 
设置 文本 4 同 管道 (动态 面板 ) 
设置 图 片 下 管道 (图 片 ) 
ME 上 管道 图 片 ) 
设置 列表 选中 项 下 管道 (图 片 ) 
> 同上 管道 图 片 ) 
移动 


设置 尺 二 旋转 | 到 达 v 角度 : |90 |fx 
方向 图 顺 时 针 〇 逆 时 针 
设置 不 透明 


》 展开 折 曼 树 节点 错 点 仿 移 x: 0 fxyl0o |fx 


4 全 局 变 豆 


没 加 动画 纺 保 进 和 ~| 时 间 100 。 训 各 


图 6-25 “下 落 用 例 
3. 操 击 屏 幕 时 小 鸟 向 上 飞 


(1) 在 页 面 上 添加 一 个 与 页 面 大 小 相同 的 “ 热 区 ”元 件 ， 命 名 为 “点 击 区 域 ”， 如 图 6-26 所 示 。 点 击 区 域 用 于 接收 用 户 点 击 屏幕 的 事件 。 


i, 


图 6-26 点击 区 域 


(2) 在 “点 击 区 域 ” 的 “鼠标 单 击 时 ”事件 中 添加 用 例 ， 如 图 6-27 所 示 。 
* 用 例 的 条 件 设 为 “开始 ”元 件 的 可 见 性 等 于 false， 即 游戏 开始 ，“ 开 始 ” 按 钮 消失 之 后 ， 点 击 区 域 才 开 始 生 效 。 


玩家 点 击 屏 幕后 先 将 isdrop 设 为 0，， 让 “小 鸟 ” 面 板 处 于 上 升 状 态 。300 之 秒 后 再 将 isdrop 设 为 1， 让 小 鸟 上 升 一 段 距 离 后， 恢复 到 自然 状态 再 次 开始 


下 落 。 玩 家 看 到 小 鸟 下 落 ， 会 再 次 点 击 …… 这 样 ， 游 戏 的 最 基本 玩法 就 实现 了 。 


(3) 完善 “小 鸟 ”面板 “状态 改变 时 ”事件 的 “上 升 ” 用 例 ， 如 图 6-28 所 示 。 “上 升 ” 用 例 中 同样 有 两 个 动作 。 这 两 个 动作 基本 上 与 下 落 动作 相 
同 ， 在 此 不 多 效 述 。 


(lf 元 件 可 见于 开始 == false) 


4 设置 但 于 isdrop = "0" 
多 ”等待 300 毫秒 
5S 设置 全 于 isdrop = "1" 


图 6-27 “和 鼠标 单 击 时 ”事件 用 例 


4 中 状态 改变 时 
4 三 下沙 
(lf 值 于 isdrop == "1") 
”旋转 小 鸟 to 90 deg 缓慢 进入 100ms 
clockwise anchor center 
有 移动 小 鸟 by (0,30) 摇摆 100ms with 


boundanes: [bottom < 600, top >= 0O] 


4 三 上 升 
(lf 倡 于 isdrop == "0") 
于 旋转 小 乌 to 0 deg 缓慢 进入 100ms 
counterclockwise anchor center 
及 移动 小 乌 by (0,-50) 摇摆 100ms with 
boundaries: [top >= 0, bottom < 600] 


图 6-28 “上升” 用 例 改 


提示 : 


注意 下 落 的 移动 距离 与 上 升 的 移动 距离 不 同 。 这 是 为 了 增加 游戏 的 难度 。 一 般 人 在 潜意识 中 会 认为 同一 只 岛 下落 与 上 升 应 该 是 相同 的 速度 。 在 穿 过 管 
道 时 会 有 个 心理 预期 一 点击 一 下 小 鸟 会 上 升 回 相同 的 高 度 。 当 游戏 设置 小 鸟 上 升 和 下 落 的 速度 不 同时 ， 会 打破 这 个 预期 ， 让 玩家 判断 失误 。 这 可 能 就 是 


Flappy Bird 游 戏 这 么 难 玩 的 原因 。 


6.5.5 ” 础 撞 检 测 
现在 已 经 实现 了 小 乌 的 飞行 与 管道 、 地 面 的 移动 。 下 面 实现 小 乌 与 管道 、 地 面 的 碰撞 。 管 道 、 地 面 的 碰撞 都 与 小 乌 相 关 ， 所 以 这 部 分 动作 都 设置 
在 “小 乌 ” 面 板 较 好 。 


撞 死 与 上 升 、 下 落 都 是 小 乌 的 一 种 状态 。 撞 死 状 态 用 isdrop 等 于 -1 来 表示 。 将 判断 碰撞 的 用 例 与 实现 碰撞 后 果 的 用 例 分 开 。 判 断 碰 撞 的 用 例 只 添加 动 
作 将 isdrop 设 为 -1。 


1. 地 面 碰 撞 
小 鸟 与 地 面 的 碰撞 可 以 用 取 巧 的 方式 实现 。 只 要 小 鸟 高 度 低 于 地 面 的 高 度 ， 就 算 小 鸟 撞 死 。 
(1) 在 “小 鸟 ”面板 的 “状态 改变 时 ”事件 中 添加 用 例 “判断 高 度 ” ， 如 图 6-29 所 示 。 
(2) 用 例 的 条 件 为 小 鸟 的 y 坐 标 大 于 500。 
* 条 件 中 用 到 了 交 量 [[this.y]]。this 代 表 当 前 元 件 ， 即 “小 鸟 ” 面 板 。this.y 表 示 “ 小 鸟 ” 面 板 的 y 坐 标 。 
500 是 “地 面 ” 面 板 的 y 坐 标 值 。 
(3) 用 例 中 添加 一 个 动作 “设置 变量 值 ”， 并 将 isdrop 设 为 -1。 
2. 管 道 碰撞 
通过 检测 “小 鸟 ”面板 与 “管道 ”面板 中 的 几 个 管道 图 片 元 件 是 否 接 触 ， 来 判断 二 者 是 否 发 生 了 磁 撞 。 
(1) 分 别 给 “管道 ”面板 的 两 个 状态 中 的 4 个 管道 图 片 命名 。 


(2) 在 “小 乌 ” 面 板 的 “状态 改变 时 ”事件 中 添加 用 例 “ 判 断 碰 撞 ”， 如 图 6-30 所 示 。 


(If 值 于 isdrop == "1") 
>》 本 上 升 


(f 值 于 isdrop == "0") 


(lf [IThis.Y]] >= “500 ) 


多 设置 值 于 isdrop ="-1" 


4 于” 状态 改变 时 
(lf 值 于 isdrop == "1") 


3 
(If 值 于 isdrop == "0") 


江 | 攻 高 大 


(If "IThis.y]l" >= "500") 
尖 | 洒 [而 近 
(lf 区域 于 This 接触 区 域 于 上 管 追 
or 区 域 于 This 接触 区 域 于 上官 追 
or 区 域 于 This 接触 区 域 于 上 管 近 
or 区 域 于 This 接触 区 域 于 下 管道 ) 
。 设置 值 于 isdrop = "-1" 


图 6-30 ”添加 “判断 碰撞 ”用 例 
(3) “判断 碰撞 ”的 条 件 设置 ， 如 图 6-31 所 示 。 


用 例 条 件 由 4 个 条 件 组 成 ， 只 要 满足 其 中 任意 一 个 条 件 就 算 用 例 条 件 成 立 。 


4 个 条 件 十 分 类 似 一 一 判断 “小 鸟 ” 面 板 是 否 与 4 个 管道 元 件 发 生 了 “接触 ”。 这 里 “接触 ”的 含义 就 是 其 字面 意思 。 


中 条 件 设立 


元 件 范围 
元 件 范围 

元 件 范围 
| 元件 并 围 


-描述 


计 区 域 于 This 接触 区 域 于 上 管道 
or 区域 于 This 接触 区 域 于 上 管道 
or 区 域 于 This 接触 区 域 于 上 管道 
of 区 域 于 This 接触 区 域 于 下 管道 


图 6-31 设立 用 例 条 件 


(4) 用 例 中 添加 一 个 动作 “设置 变量 值 ”， 将 isdrop 设 为 -1。 


6.5.6 ”结束 


小 驴友 生 碰 撞 ， 游 戏 融 结束 了 。 进 入 结束 页 面相 天 的 动作 也 可 以 放 在 “小 乌 ” 面 板 上 。 在 检测 全 撞 的 用 例 中 将 isdrop 变 量 设 为 了 -1， 可 以 以 此 为 标记 
创建 用 例 。 


(1) 准备 好 结束 页 面 的 素材 。 在 “标题 ”面板 中 添加 一 个 状态 “游戏 结束 ”， 如 图 6-32 所 示 。 


4 者 标题 (动态 面板 ) 


A 加 开场 标 捉 
4A 国 游戏 结束 


图 6-32 ”添加 “游戏 结束 ”状态 
(2) 在 “小 乌 ” 面 板 的 “状态 改变 时 ”事件 中 添加 “结束 ”用 例 ， 如 图 6-33 所 示 。 
将 “小 鸟 ” “地面 ” “管道 ”3 个 面板 的 循环 切换 状态 的 动作 停 下 来 ， 让 页 面 上 的 元 素 停 止 运动 。 


将 小 岛 的 旋转 角度 设置 为 0。 因 为 小 鸟 可 能 是 以 各 种 角度 撞 死 ，“ 小 鸟 ” 面 板 停止 循环 之 后 ， 小 岛 可 能 在 各 种 角度 上 被 停止 ， 所 以 这 里 需要 做 一 


下 [44 复位 ” 
` 将 “标题 ”面板 的 状态 切换 为 “游戏 结 


` 显示 “标题 “记分 牌 “排名 “开始 ”等 在 游戏 过 程 中 被 隐藏 的 元 件 ， 以 便 玩家 重新 开始 游戏 。 


(3) 由 于 以 上 几 步 设置 了 很 多 新 的 变量 和 状态 ， 所 以 “开始 ”按钮 的 事件 用 例 也 要 跟着 改变 ， 如 图 6-34 所 示 。 
隐藏 “开始 ”页 面 上 的 元 素 。 

` 设置 小 鸟 ”“ 地 面 “管道 3 个 面板 开始 循环 切换 状态 。 

` 将 “标题 面板 的 状态 切换 为 “开场 标题 。 

. 设置 isdrop 等 于 1。 


` 将 管道 和 小 鸟 移 回 初始 位 置 。 


4 二 结束 
(lf 信 于 isdrop == "-1") 
多 ”设置 小 乌 为 停止 循环 
地 历 为 俘 下 循环， 
人 当道 为 停止 循环 
旋转 小 乌 to 0 deg counterclockwise 


anmchor center 

设置 标题 为 游戏 结束 
显示 标题 逐渐 500 ms， 

襄 分 牌 同上 滑动 500 ms， 


排名 向 上 滑动 500 ms， 
开始 同上 滑动 500 ms 


图 6-33 ”游戏 结束 


机 delay first change， 
管道 为 Next wrap 循环 间隔 500 富 秒 
delay first change， 


地 面 为 Next wrap 循环 间隔 500 量 秘 


设置 标题 为 开场 标题 
设置 值 于 isdrop = "1 


移动 管道 to (360,-180)， 
小 乌 to (152,240) 


图 6-34 “开始 ”事件 用 例 


小 乌 每 穿 过 一 次 管道 得 1 分 。 因 为 实际 上 小 乌 一 直 在 屏幕 中 间 ， 没 有 左右 移动 ， 所 以 将 判断 得 分 的 动作 放 企 “管道 ”面板 上 较 好 。 “管道 ”每 次 移动 
经 过 小 乌 时 加 分 。 


(1) 添加 “得 分 ”面板 ， 如 图 6-35 所 示 。 用 于 在 游戏 过 程 中 显示 分 数 。 


二 外 框 1 State1 (FlappyBird) 


A Statel 

A State1 
>》 坟 标题 (动态 面板 ) 
》 坟 小 乌 (动态 面板 ) 
》 坟 地 面 (动态 面板 ) 
>》 者 管道 (动态 面板 ) 


图 6-35 ”添加 “得 分 ”面板 


(2) 将 “得 分 ”面板 中 的 文字 元 件 命名 为 “分 数 ”。 将 “记分 牌 ”面板 中 的 文字 元 件 也 命名 为 “分 数 ”， 如 图 6-36 所 示 。 


记分 牌 


图 6-36 ”分 数 
提示 : 
分 数 可 以 使 用 一 些 显眼 、 花 哨 的 字体 ， 这 样 更 便于 玩家 在 玩 游戏 时 查看 。 
(3) 在 “管道 ”面板 的 “状态 改变 时 ”事件 中 添加 3 个 用 例 ， 如 图 6-37 所 示 。 


. 将 原来 的 用 例 分 成 两 个 。 以 横 坐标 -52 为 界 (管道 宽度 为 52， 和 坐标 为 -52 时 ， 页 面 上 刚好 看 不 到 管道 ) ， 当 小 于 -52 时 将 管道 移 回 初始 位 置 。 


4 形状 态 改 变 时 


A ens Case 1 
(lf "[[This.x]] >= -52 ) 
多 移动 This by (-28,0) 线性 500ms 
Case2 
(If "TIThis.x]]” < "-52") 


多 移动 This to (360,[[-180+Math.pow(-1,score)*50]]) 


A [sa 得 分 


(If [This. xj < "204" 
下 证 省 二 全 -日 2 


and 值 于 isscored = == "0") 
盈 置 值 于 score = "[[score+1]]" 
设置 文子 于 分 数 = 值 于 score 
显示 得 分 


图 6-37 ”判断 得 分 


由 于 Axure RP 很 难 捕捉 到 管道 刚好 经 过 小 鸟 的 那 一 瞬间 ， 所 以 本 例 中 用 了 一 个 取 巧 的 方法 来 实现 。 


: “得 分 ”用 例 用 来 判断 得 分 。 
只 要 管道 移动 到 小 鸟 身 后 就 算得 分 。 小 鸟 的 x 坐标 值 为 204， 管 道 的 x 坐标 值 小 于 204， 即 可 得 分 。 但 限制 管道 每 次 移动 复位 前 只 能 得 1 分 。 得 分 之 后 
即 设 置 一 个 变量 isscored 为 1。 


. 当 管 道 复位 时 ， 将 isscoted 设 为 0。 


. 得 分 时 设置 一 个 变量 scote 记 录 分 数 ， 每 次 得 分 时 ， 设 置 scofe 的 值 为 上 次 scote 的 值 再 加 1。 
. 得 分 时 ， 显 示 “ 得 分 ” 面板。 设置 “分 数 ” 元 件 上 的 文字 为 scote 的 值 。 


纵 坐 标 改 为 [L180+Math.pow (-1，score) *50]]。 其 中 Math.pow 是 计算 寡 的 函数 。-1 的 scote 


" 注意 Case2 中 的 移动 动作 的 坐标 不 再 是 (360，-180) 了 ， 
次 管道 间隙 出 现 的 位 置 


次 方 在 分 数 为 奇数 时 等 于 -1， 在 分 数 为 偶数 时 为 1。 所 以 这 个 表达 式 实际 是 在 原来 的 坐标 -180 的 基础 上 增加 或 减少 50， 这 样 就 使 每 


发 生 了 变化 ， 增 加 了 游戏 的 随机 性 。 
提示 : 
这 个 用 例 比 较 复 杂 ， 请 读者 注意 在 “说 明 ” 中 添加 适当 的 解释 。 


(4) 在 第 (3) 步 中 引入 了 两 个 新 的 变量 ， 需 要 人 在 “开始 ”按钮 的 “鼠标 单 击 时 ”事件 中 为 其 设置 初始 值 ， 如 图 6-38 所 示 。 


配置 动作 


选择 要 设置 的 全 局 变量 


isdrop to "1" 


设置 小 乌 为 Next wrap 循环 间隔 100 毫 各 
delay first Change， 

管道 为 Next wrap 循环 间隔 500 毫 种 delay 
first change， 

地 面 为 Next wrap 循环 间隔 500 率 种 
设置 标题 为 开场 标题 

设置 值 于 isdrop = "1", and 

值 于 score = "0", and 

值 于 isscored = "0" 

移动 管道 to (360,-180)， 

小 乌 to (152,240) 


设 首 全 局 楼 量 值 为 : 
值 


图 6-38 设置 初始 值 
(5) 小 鸟 的 “结束 ”事件 用 例 中 也 需要 随 之 更 新 ， 如 图 6-39 所 示 。 
. 结束 时 设置 “记分 牌 ” 中 的 分 数 元 件 上 的 文字 为 scote 的 值 。 


` 结束 时 隐藏 “得 分 ”面板 。 


4 是 结束 
(If 信 于 op = 9 


图 6-39 “结束 ”事件 用 例 


(6) 预 蜗 原型 。 可 以 看 到 开始 游戏 后 ， 每 经 过 一 个 管道 惑 加 了 1 分 。 游 戏 结束 时 会 显示 总 得 分 ， 如 图 6-40 所 示 。 


a ) 得 分 b ) 结 


第 / 草 ”市 地 图 的 原型 


做 基于 地 理 位 置 的 产品 时 ， 需 要 在 原型 中 加 入 地 图 。 如 果 地 图 的 相关 功能 比较 简单 ， 可 以 用 一 张 截图 来 示意 。 如 果 产 品 的 核心 功能 是 基于 地 图 的 ， 在 
原型 中 加 入 真实 的 地 图 效果 会 更 好 。 一 个 可 拖 慢 、 缩 放 、 点 击 的 地 图 ， 能 更 好 地 体现 产品 功能 ， 便 于 团队 的 沟通 和 理解 。 另 外 ， 原 型 更 真实 也 便于 产品 经 
理 更 直观 地 体验 功能 流程 ， 尽 快 发 现 产 品 中 存在 的 问题 。 


7.1 地 图 开放 平台 
百度 地 图 、 高 德 地 图 等 都 有 免费 的 开放 平台 ， 可 以 用 来 制作 “ 带 地 图 的 原型 ”。 可 以 先 利用 开放 平台 的 接口 做 出 需要 的 地 图 HTML 页 面 ， 然 后 将 地 图 
HTML 页 面 加 入 Axure RP 生成 的 项 目 中 即 可 实现 一 个 “ 带 地 图 的 原型 ”。 


下 面 以 百度 地 图 开放 平台 为 例 ， 介 绍 制作 “市 地 图 的 原型 ”所 需 了 解 的 相关 概念 。 


7.1.1 接口 


百度 地 图 的 开放 平台 提供 了 多 种 接口 。 在 HTML 文 件 中 ， 按 需求 调用 这 些 接口 ， 融 能 做 出 符合 需求 的 地 图 的 HTML 页 面 。 


1. 开 发 平台 


开放 平台 会 提供 jiOS9、 安 卓 、Web 等 各 种 平台 的 接口 。 由 于 Axure RP 生 成 的 原型 是 网 页 形式 的 ， 所 以 要 把 地 图 页 面 加 入 到 原型 中 ， 地 图 页 面 必须 也 
是 网 页 形式 的 。 网 页 需要 用 Web 接 口 来 制作 。 后 文 用 到 的 主要 是 用 于 Web 开 发 的 JavaScript APl。 


2. 功 能 


百度 地 图 开放 平台 支持 地 图 展示 、 定 位 、 导 航 、 搜 索 等 多 种 功能 。 原 型 不 是 真实 的 产品 ， 产 品 经 理 也 不 需要 掌握 全 部 功能 ， 只 要 理解 基本 的 地 图 展示 
功能 ， 以 及 在 地 图 上 添加 覆盖 物 的 功能 ， 就 足以 实现 各 种 原型 了 。 


7.1.2 示例 


下 面 是 一 个 简单 的 地 图 页 面 的 示例 代码 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no™" /> 

<meta http-equiv="Content-Type" CORt er ex /Teer charset=utf-8" /> 

<title>Hello, World</title> 

<style type="text/css"> 

html {height:100%} 

body{height:100%;margin: Opx;padding: Opx} 

10 #container{height:100%} 

11 </style> 

12 <ecript type="text/ avascript™ gre="httpr//apl.map.baido.com/api?v=2.0gaks= 您 的 窗 负 "> 
13 //v 2.0 版 本 的 引用 方式 : src="http://api.map.baidu.com/api?v=2.0&ak= 您 的 密 钥 " 

14 //v 1.4 版 本 及 以 前 版 本 的 引用 方式 : src="http://api.map.baidu.com/api?v=1.4&key= 您 的 密 钥 gcallback=initialize" 
15 </script> 
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16 </head> 

17 <body> 

18 <div id="container"></div> 

19 <script type="text/jJavascript"> 

20 var map = new BMap.Map ("container"),; // 创建 地 图 实例 

21 var point = new BMap.Point (116.404, 39.915); // 创建 点 坐标 
22 map.centerAndZzoom (point, 15); // 初始 化 地 图 ， 设 置 中 心 点 坐标 和 地 图 级 别 
23 </script> 

24 </body> 

25 </html> 

二 局: 


上 面 的 这 段 代码 还 不 能 直接 使 用 ， 读 者 需要 在 开放 平台 上 注册 并 获取 自己 的 密 匙 ， 然 后 用 密 匙 蔡 代 代码 中 “您 的 密 是 ”文字 。 


蔡 代 密 ， 把 这 段 代 码 复 制 到 记事 本 中 并 保存 ， 将 扩展 名 改 为 .html。 之 后 打开 这 个 HTML 文 件 束 可 以 看 到 这 个 示例 了 ， 如 图 7-1 所 示 。 该 示例 是 
一 个 定位 在 天 安 门 的 地 图 。 


S| CN\Users\inn\DesktopVF DD = 此 中 到 Hello World 


站 = 
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图 灵 境 胡同 


呈 ) 老 佛 区 百货 
A 本 


一 二 北京 华 本 
大 悦 城 图 | 一 商务 酒店 
人生) 汉 光 百货 


品 二 -天安 太 


' 回 中 共 中 央 组 织 部 
| 名) 华 演 国 际 大 酒店 崩 ) 国家 大 剧院 


图 7-1 示例 
示例 代码 中 的 大 部 分 代码 是 固定 的 格式 ， 读 者 不 需要 理解 ， 直 接 复 制 使 用 即 可 。 


代码 第 6 行 中 ，<title> 和 <Vtitle> 是 标题 标签 ， 标 签 之 间 是 写 标题 的 位 置 。 示 例 的 标题 为 “Hello，World”。 
<title>Hello, World</title> 


代码 第 12 行 为 引用 百度 地 图 API 文 件 。 引 用 了 API 文 件 之 后 ， 才 可 以 调用 API 接 口 。 


<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= 您 的 密 钥 "> 
代码 第 19 ~ 23 行 中 ，< script type="text/javascript"> 和 </script> 之 间 是 调用 JavaScript API 的 地 方 。 后 文 调用 接口 的 代码 都 写 在 这 里 。 


19 <script type="text/javascript"> 


20 var map = neWw BMap.Map ("container"); // 创建 地 图 实例 
21 var point = new BMap.Point (116.404，39.915); // 创建 点 坐标 
22 map.centerAnd7Zoom (point, 15); // 初始 化 地 图 ， 设置 中 心 点 坐标 和 地 图 级 别 


23 </script> 
上 面 的 代码 中 : 

第 20 行 创建 了 一 个 地 图 实例 map。 

. 第 21 行 创建 了 一 个 点 point， 并 给 point 赋 了 一 个 坐标 值 。 该 坐标 值 是 天 安 门 的 经 纬度 举 标 。 


“ 第 22 行 调用 了 map 的 初始 化 方法 ， 定 位 点 设 为 point， 缩 放 级 别 设 为 15。 该 行 代 码 让 地 图 显示 出 来。 


7.1.3 ”设置 控件 


通过 调用 地 图 的 addControl 接 口 ， 可 以 控制 地 图 上 是 否 显示 “ 缩 放 控件 ” “比例 尺 控件 ”， 如 图 7-2 所 示 。 
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图 7-2 ”缩放 控件 


实现 这 个 功能 的 代码 如 下 : 


map.addControl (new BMap.NavigationControl ()); 


中 


N 


.mapb: 初始 化 的 地 图 。 

.addConttol: 用 来 添加 控件 。 可 以 用 来 添加 缩放 控件 、 比 例 尺 控件 、 缩 略图 控件 等 。 
. NavigationConttol: 控件 的 形式 。 

如 果 制 作 的 是 网 站 原型 ， 还 可 以 让 地 图 支持 鼠标 滚轮 缩放 操作 。 代 码 如 下 : 


map.enableScrollWheelZoom () ; 


enableScrollWheelZzoom 用 来 开启 鼠标 滚轮 操作 。 


7.1.4 地 图 风格 


通过 setMapstyle () 方法 可 以 控制 地 图 的 风格 ， 让 地 图 风格 与 产品 类 型 相符 。 如 图 7-3 所 示 为 midnight 风 格 的 地 图 。 
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图 7-3 ”mindnight 风 格 的 地 图 


实现 图 7-3 的 风格 的 代码 如 下 : 


map.setMapStyle ({style: 'midnight"'}); 


其 中 

` setMapStyle: 用 来 更 改 地 图 的 风格 。 

-fstyle: "midnight} : midnight 风 格 。 

、 标 注 、 区 划 等 元 素 的 颜色 和 样式 。 


开放 平台 通常 会 提供 多 个 模板 ， 甚 至 会 提供 一 些 个 性 化 编辑 器 ， 可 以 改变 地 图 上 的 道 


7.1.5 ”和 窗 和 匡 物 


SN 


所 有 苹 加 或 覆盖 到 地 图 的 内 容 ， 统 称 为 地 图 覆盖 物 ， 如 标注 、 矢 量 图 形 、 信 息 窗口 等 。 覆 菇 物 拥有 自己 的 地 理 坐 标 ， 当 拖 动 或 缩放 地 图 时 ， 它 们 会 相 


应 地 移动 。 
1. 标 注 


添加 标注 的 效果 如 图 7-4 所 示 。 
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图 7-4 添加 标注 的 效果 
添加 标注 的 代码 如 下 : 


Var marker = new BMap.Marker (point);  // 创建 标注 
map.addOverlay (marker) ; 


其 中 


. matket: 是 地 图 上 的 标注 。 创 建 时 可 以 直接 用 坐标 点 Point 赋值 。 
. addOvetlay: 用 来 把 标注 matket 添 加 到 地 图 map 上 。 


2. 图 标 


除了 默认 的 标注 外 ， 还 可 以 添加 目 定 义 的 图 标 ， 如 图 7-5 所 示 。 
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图 7-5 ”添加 图 标 


预先 准备 好 一 张 图 片 hongbao.png 〈 可 以 目 己 画 或 从 实例 源 文件 中 找到 ) ， 如 图 7-6 所 示 ， 然 后 将 图 片 与 HTML 文 件 放 在 一 个 目录 中 。 


图 7-6 hongbao.png 图 片 


在 HTML 文 件 中 添加 如 下 代码 : 


Var myIcon = new BMap.Icon ("hongbao.png"， new BMap.Size(24，30)); // 创建 图 标 
Var marker = new BMap.Marker (point, {icon: myIcon}); 
map.addOverlay (marker) ， 


其 中 
mylcon: 用 hongbao.png 创 建 的 图 标 。 创 建 时 可 以 设置 图 标的 大 小 。 
本 次 创建 matket 时 ， 设 置 了 两 个 参数 point 和 ficon: mylcon}。 设 置 这 两 个 参数 就 不 再 创建 默认 标注 ， 而 是 创建 为 自 定义 图 标 。 


` 仍 用 addOverlay 将 matker 添 加 到 地 图 map 上 。 


覆 善 物 不 只 是 能 看 ， 还 能 响应 鼠标 单 击 事件 ， 实 现 交 互动 作 。 后 文案 例 中 会 有 详细 的 说 明 。 


7.1.6 ”信息 窗口 


信息 窗口 也 是 一 种 特殊 的 覆 薪 物 ， 它 可 以 展示 更 多 文字 或 图 片 等 富 文 本 信息 。 如 图 7-7 所 示 的 窗口 中 显示 了 一 行 标 题 和 一 行 正文 。 
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添加 信息 窗口 的 代码 如 下 : 


var opts { 

width : 200，// 信息 窗 
height: 200，// 信息 窗口 
title : "title"” // 信息 
} 


var infoWindow 


半 动 


new BMap.InfoWindow ("abc", 7 


> Hello, Woeorld 
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图 7-7 信息 窗口 


”77 创建 信息 窗口 对 旬 


map.openInfoWindow (infoWindow，map.getCenter()); // 打开 信息 窗口 
-a {中 
* Opts: 是 创建 信息 窗口 时 要 用 到 的 和 参数， 包括 宽 度 (width) 、 高 度 (height) 、 标 题 (title) 等 。 


* iNnfoWindow: 信 息 窗 器 。 创 建 信 息 窗 局 时 传 入 窗 已 上 的 “ 内 0 


HTML 内 容 ， 例 如 图 片 、 按 钮 等 。 后 文案 例 中 将 会 详细 介 


绍 。 


openInfoWindow: 用 来 在 地 图 上 打开 信息 
其 上 打开 
提示 : 

司 一 时 间 只 能 有 一 个 信息 窗口 在 地 图 上 打开 。 


一 | 


.2 


下 面 以 一 个 实际 的 项 目 为 例 ， 介 


言 息 和 “参数 ” 信息 心 > o 本 例 中 ， 信息 heN 窗口 展示 了 文字 abc。 信息 窗口 还 可 以 展示 


窗口 。 打 开 时 设 定 打开 的 位 置 为 地 图 中 心 点 。 信 息 窗口 可 直接 在 地 图 上 的 任意 位 置 打 开 ， 也 可 以 在 标注 对 


案例 17: 制作 LBS 应 用 “ 踩 红 包 ” 的 原型 


召 如 何 制作 地 图 页 面 ， 如 何 将 地 图 加 入 原型 中 。 


本 案例 实现 了 一 个 红包 平台 。 商 户 可 以 在 地 图 的 任意 位 置 发 布 红包 。 用 户 通 过 红包 地 图 查看 哪里 有 红包 ， 走 到 红包 附近 时 可 以 领取 ， 如 图 7-8 所 示 。 
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图 7-8 踩 红 包 原 型 


7.2.1 初始 化 地 图 页 面 


首先 新 建 页 面 文件 ， 然 后 在 页 面 中 调用 接口 生成 地 图 ， 显 示 缩 放 控件 、 比 例 尺 控件 ， 设 置地 图 的 初始 定位 。 
(1) 用 任意 工具 创建 地 图 HTML 文 件 。 最 简单 的 办 法 是 新 建 一 个 笔记 本 文件 ， 然 后 将 文件 名 改 为 nap.html。 


(2) 在 map.html 中 添加 以 下 代码 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=gpb2312™ /> 
<title> 躁 红包 </title> 

<style type=”text/css’”> 

html {height:100%} 

body{height:100%;margin: Opx;padding: Opx} 

10 #container{height:100%} 

11 </style> 

12 <script type=”text/jJavascript" src="http://api.map.baidu.com/api?v=2.0&ak=D1l5e2f4fe3ab2f4cb972fd2c9b1l864ee”> 
13 </script> 

14 </head> 

15 <body> 

16 <div id="container"></div> 

17 <script type="text/Javascript"> 

18 // 初 始 化 

19 // 添 加 控件 

20 // 添 加 信息 窗口 

21 // 添 加 敌 盖 物 

22 </script> 

23 </body> 

24 </html> 


(O00~OORODP 


该 段 代 码 与 7.1.2 节 中 基本 一 致 ， 只 在 两 个 地 方 做 了 修改 : 
* 在 第 5 行将 charset (字符 集 ) 设 为 gb2312。 这 是 为 了 在 地 图 中 显示 中 文 而 重新 设 定 了 页 面 使 用 的 字符 集 。 
` 在 第 6 行将 页 面 标题 设 为 “ 踩 红包 。 


(3) 在 注释 “初始 化 ”的 位 置 ， 添 加 如 下 代码 ， 初 始 化 地 图 。 与 7.1.2 节 中 的 代码 基本 一 致 ， 同 样 将 地 图 中 心 定 位 在 天 安 门 附 近 。 


var map = new BMap .Map ("container"); 
var point = new BMap.Point (116.403, 39.914); 
map . centerAnaq2oom (point, 15); 


(4) 在 注释 “// 添 加 控件 ”的 位 置 添加 代码 : 


map.addControl (new BMap.NavigationControl () ) ; 
map.enableScrollWheelZoom(); 
map.setMapStyle ({style:'googlelite'}); 


前 2 行 添加 了 缩放 控件 。 


第 3 行 设 置地 图 风格 为 goopglelite， 这 种 风格 去 掉 了 地 图 上 多 余 的 地 点 信息 ， 


如 图 7-9 所 示 ， 让 用 户 更 专注 于 红包 。 
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图 7-9 ”googlelite 风 格 


7.2.2 ”在 地 图 上 添加 红包 


前 面 介绍 了 如 何在 地 图 上 添加 一 个 红包 。 要 做 出 一 个 “红包 平台 ”原型 ， 应 该 至 少 添加 100 个 红包 才 够 。 添 加 多 个 红包 要 用 循环 语句 ， 循 环 100 次 添 


加 一 个 红包 的 过 程 。 


(1) 将 添加 一 个 红包 的 过 程 写成 一 个 亢 数 。 在 注释 “// 添 加 控件 ”的 位 置 添加 代码 : 


1 function addMarker (Polnt) { 

2 var myIcon = new BMap.Icon("hongbao.png", new BMap.Size(24, 30)); 
3 Var marker = new BMap.Marker (point, {icon: myIcon}); 

4 map.addOoverlay (marker); 

.让 


丑 


-~ 


. 第 1 行 代码 创建 了 有 函数 addMatket () 。 大 括号 中 都 是 函数 的 代码 。 该 函数 中 有 一 个 参数 ， 用 来 设置 红包 的 坐标 点 。 
addMarker() 函数 中 的 代码 与 7.1.5 节 中 一 致 ， 用 图 片 hongbao.png 在 地 图 上 创建 了 一 个 红包 。 


(2) 用 循环 语句 调用 100 次 addMarker () 阔 数 。 继 续 添 加 代码 如 下 : 


1 for (var 1 = 0; 1 < 100; 1i++) { 
2 Var point = new BMap.Point (116.354 + Math.random() * 0.1, 


3 39.855 + Math.random() * 0.1) ; 
4 addMarker (point); 

D 1} 

其 中 


.for 是 循环 语句 。 变 量 i 从 0 开始 累加 ， 每 次 循环 加 1， 直 到 i 加 到 100， 循 环 停止 。 


: 第 2、3 行 代码 是 一 个 设置 坐标 点 的 语句 。Math .random () 是 一 个 0，1 之 间 的 随机 数 。 这 里 设置 了 一 个 坐标 值 在 (116.354，39.855) 和 


(116.454，39.955) 之 间 的 随机 点 。 


: 第 4 行 代 码 将 刚 设置 的 随机 点 传 给 addMatrker () 函数 ， 创 建 了 一 个 随机 位 置 的 红包 。 


提示 : 


地 图 的 初始 定位 点 是 〈116.403，39.914) 。100 个 (116.354，39.855) 和 “(116.454，39.955) 之 间 的 点 刚好 履 盖 了 初始 点 周围 的 一 片区 域 。 演 


时 ， 上 下 左右 拖 如 地 图 都 可 以 看 到 有 红包 自然 分 布 在 地 图 上 。 


在 信息 窗口 中 ， 可 以 用 HTML 语 言 写 出 复杂 的 样式 ， 如 图 7-10 所 示 。 窗 口中 包含 标题 、 正 文 、 图 片 和 按钮 。 


地 址 ;北京 
市 东城 区 王 
时 并 六 街 88 
写 乐 天 银泰 
百货 八 层 


图 7-10 ”信息 窗口 


(1) 在 注释 “// 信 息 窗口 ”的 位 置 添加 如 下 代码 ， 用 HTML 语 言 写 出 窗口 的 样式 。 


1 Var sContent = 

2 "<h4 style='margin:0 0 5px 0;padding:0.2em 0'> 到 店 领 9 元 现金 红包 </h4>" + 

3 "<img style="'float:right;margin:4px' id="'imgDemo' 

4 src='http://pl.meituan.net/460.280/deal/ 604e32ele4f8f6el2adaa7bf69c8127a144997.jpg' width= '139' heignt="'104' title=' 火 锅 '/>" + 
5 "<p style='margin:0;line-heignt:1.5;font-size:13px'> 地 址 :北京 市 东城 区 王府 井 大 街 88 号 乐天 银泰 百货 八 层 </p>" + 

6 "<input type='button' value=' 查 看 红包 ' onclick='getmoney()' 

7 style='background-color:#ffffff;border:1lpx solid #d65645;width:220px; height:38px;'/>"+ 

8 </divS 


j 代 码 创建 了 一 个 变量 SContent， 用 来 记录 描述 信息 窗口 样式 的 HTMIL 语 和 句 。 


了 代码 设置 标题 的 样式 。 


` 第 3、4 行 代码 设置 了 图 片 的 样式 。 其 中 的 链接 是 图 片 的 URL。 


j 代 码 设 置 了 正文 的 样式 。 


` 第 6、7 行 代码 设置 了 按钮 的 样式 。 注 意 ， 其 中 有 一 个 属性 onclick， 表 示 按 钮 的 “鼠标 单 击 时 ”事件 。 鼠 标 单 击 时 会 调用 getmoney () 函数 ， 这 个 


数 在 第 〈3) 步 中 实现 。 
. 第 8 行 是 结束 标志 。 


(2) 继续 添加 如 下 代码 ， 设 置 窗 口 的 参数 。 


007 // 信息 窗口 宽度 
title : "海底 捞 王 府 井 店 " // 信息 窗口 标题 


} 


该 段 代码 与 7.1.6 节 中 的 代码 类 似 。 这 里 没有 设置 信息 窗口 的 高 度 ， 信 息 窗 口 会 根据 内 容 大 小 自动 调整 高 度 。 


(3) 继续 添加 如 下 代码 ， 实 现 第 (1) 步 中 出 现 的 函数 。 


function getmoney () {window.open ("./ 海底 搁 王 府 井 店 .htm1L") } 


函数 中 window.open 用 来 在 当前 窗口 打开 新 页 面 


"./ 海 底 捞 王府 并 店 .html" 是 新 页 面 的 位 置 和 文件 名 。 “./” 表 示 在 当前 文件 夹 。 后 面 的 文件 名 是 Axute RP 原 型 生成 的 页 面 。 在 后 面 会 介绍 这 个 


(4) 继续 添加 如 下 人 代码， 创建 信息 窗 


var infoWindow=new BMap.InfoWindow (sContent，opts) ; // 创 建 信 息 窗 口 对 象 


(5) 在 addMarker () 国 数 中 添加 如 下 面 红 框 中 的 代码 。 在 “红包 ”的 鼠标 单 击 事件 中 ， 打 开 信息 窗 


function addMarker (Polnt) { 
var myIcon = new BMap .Icon ("hongpbao .png"，new BMap.Size(24, 30)); 
Var marker = new BMap .Marker (point, {icon: myIcon}) ， 
marker.addEventListener ("C1L1LICK"，function () { 

map.openInfoWindow (infoWindow,pPpoint); 
map.addOverlay (marker) ; 


} 
其 中 
addEventListenet 用 来 设置 发 生 触 发 事件 时 该 如 何 响应 。 
` 首先 传 入 click 参 数 ， 表 示 下 面 将 设置 鼠标 单 击 事 件 。 
` 传 入 的 两 个 参数 是 一 个 函数 。 函 数 的 内 容 是 打开 信息 窗口 infoWindow。 


至 此 ， 地 图 页 面 已 经 写 好 了 。 在 浏览 器 中 可 以 预 响 地 图 页 面 的 效果 ， 如 图 7-11 所 示 。 在 地 图 上 自然 分 布 着 多 个 红包 ， 


所 击 红 包 后 弹出 信息 窗 


页 
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图 7-11 预览 地 图 页 面 效 果 


7.2.4 ”整合 友 布 


到 这 一 步 为 止 ， 已 经 做 好 了 地 图 页 面 。 要 在 原型 中 使 用 这 个 地 图 页 面 ， 还 需要 把 地 图 页 面 整合 到 原型 中 。 


(1) 用 Axure RP 创建 原型 。 先 添加 3 个 页 面 ， 如 图 7-12 所 示 。 


页 面 +] 此 | 包 


| 踩 红包 
|] 海底 氨 王 讨 并 上 店 
门 领取 成 功 


图 7-12 原型 页 面 
(2) 在 “ 踩 红 包 ” 页 面 中 添加 矩形 元 件 授 出 手机 外 框 。 表 添加 “内 联 框架 ”元 件 ， 如 图 7-13 所 示 。 


(3) 设置 内 联 框 架 的 链接 为 “./map.html”， 如 图 7-14 所 示 。 “./” 表 示 当 前 文件 夹 。 将 前 面 写 好 的 map.html 文 件 复制 到 原型 的 目录 下 即 可 调 


(4) 在 “海底 氨 王 府 井 店 ” 页 面 中 添加 元 件 ， 把 出 红包 的 位 置信 息 、 活 动 介绍 、 领 取 人 数 等 ， 如 图 7-15 所 示 。 应 用 前 几 章 的 方法 ,设置 适当 的 交互 
效果 ， 输 入 4 位 暗号 后 进入 “领取 成 功 ” 页 面 。 具 体 设 置 方 法 不 是 本 章 重 点 ， 读 者 可 以 参考 原型 了 解 详情 。 
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图 7-13 ”内 联 框 架 


[| 蹄 红包 
[9 海底 挠 王府 井 店 


要 SH AI 


链接 到 url 或 文件 
起 链接 | WED 


图 7-14 ”设置 内 联 框架 链接 


(5) 在 “领取 成 功 ”页 面 添加 “继续 踩 红 包 ”按钮 ， 点 击 该 按钮 后 打开 “ 踩 红包 ”页 面 ， 完 成 原型 流程 的 循环 ， 如 图 7-16 所 示 。 
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图 7-15 设置 “海底 捞 王 府 井 店 ” 页面 
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图 7-16 “海底 捞 王 府 井 店 ” 页 面 
(6) 在 “发 布 ” 菜 单 中 选择 “生成 HTML 文 件 ” 命 令 ， 如 图 7-17 所 示 。 


(7) 在 生成 的 文件 夹 中 ， 复 制 、 粘 贴 map.html 文 件 和 hongbao.png 文 件 ， 如 图 7-18 所 示 。 


预 蜗 选项 .….(O 〇 ) 
上 起 布 到 AxShare...(A) 


在 HTML 葡 件 中 重新 生成 当前 页 面 (R) 
生成 Word 襄 明 书 .…(G) 

更 多 生成 器 和 配置 文件 (M) 
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曙 | 领取 成 功 .html 


图 7-18 ”原型 文件 来 
地 图 页 面 与 原型 页 面 互相 引用 、 相 互 跳 转 : 
打开 原型 进入 “ 踩 红包 ” 页面， 页面 中 的 内 联 框架 引用 了 “地 图 ”页面 。 
点击“ 地图” 页面 信息 窗口 中 的 “查看 红包 按钮 可 以 跳 转 到 原型 的 “海底 捞 王 府 井 店 页面 。 


将 地 图 整合 到 原型 里 之 后 ， 打 开 原 型 文件 即 可 查看 原型 。 


第 8 章 “响应 式 原型 设计 


响应 式 的 网 站 是 指 网 页 的 排版 会 根据 户 行为 及 使 用 的 设备 环境 ， 如 系统 平台 、 屏 幕 尺 寸 、 屏 幕 方向 等 进行 相应 的 布局 调整 。 


8.1 ”响应 式 设 计 


做 到 页 面目 动 响应 用 户 的 设备 环境 ， 一 个 网 站 能 够 兼容 多 个 终端 一 而 不 是 为 每 个 终端 做 一 个 特定 的 版 本 。 


8.1.1 响应 式 设 计 介 绍 
例如 ， 图 8-1 中 就 是 一 个 响应 式 网 站 的 原型 。 图 8-1a 是 在 PC 上 打开 浏览 器 浏览 原型 的 效果 ; 图 8-1b 是 缩小 浏览 器 ， 模 拟 在 手机 上 的 浏览 的 效果 。 原 
型 网 页 在 浏览 器 宽度 变 窒 后 ， 自 动 改 变 了 网 页 的 布局 。 
.顶部 的 分 类 隐藏 到 了 右上 角 的 更 多 按钮 中 。 
.多 张 图 片 变 成 了 轮 播 图 自动 切换 。 


` 下方 多 个 列表 合并 在 一 起 。 最 终 变 成 一 个 可 以 切换 标签 的 单列 表 


器 36kr| 关 注 互 联网 创业 ” X 十 器 36kr| 关 文本 让 
() 127.0.0.1:32767/start.html#p=36kr 关 MA i 海 | 127.0.0.1 
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互联 网 从 史 绿 英 场 ，" 淹 足 " 烧 钱 买 球 队 ， Xd CS: GO 委 丰 国内 罩 
Os 上 代 辣 的 访 二 7 返 CS 向 昨 ， 还 足 先 得 


直人 全 和 的 场 一 涉 是 “ 烧 钱 买 球 趴 ， 


而- 基 { 
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负 其 信 ~ 二 些 码 棕 取 稍 性 
碟 马 


用 数据 化 的 方式 解析 授 资 条 就 之 七 最 垃 考 的 Draf- 
along 


已 


向 向 补 两 疡 宗 访 ， 印度 二 是 小 米 主要 
目标 市 场 ， 暂 无 !POD 计划 


Drag-along， 些 对 是 一 个 景 容 号 二 和 的 苹 孝 ， 操 次 人 在 不 控 妥 且 前 这 人 不 
同 荐 的 情 咒 下， 也 可 以 将 整个 公司 卖 范 他 


厅 千 热闹 自 媒体 也 换 不 来 的 深 应 报道 ， 还 有 谁 在 意 


8.1.2 ”为 什么 做 中 应 陈设 计 


最 早 ， 人 们 通常 要 为 PC 端 和 移动 站 等 每 种 设备 各 做 一 套 网 站 。 有 了 响应 式 设计 之 后 ， 人 们 只 需 开 发 一 个 网 站 ， 上 自动 在 不 同 设备 上 调整 为 不 同 的 布 
局 。 


1. 体 验 更 好 


随 着 智能 设备 不 断 增加 ， 让 用 户 可 以 在 不 同 设备 上 有 连续 完整 的 体验 变 得 越 来 越 重 要 。 不 同 的 终端 上 设计 不 同 的 布局 和 交互 也 成 为 了 网 站 设计 的 最 基 
本 要 求 。 现 在 已 经 很 少 有 只 适 配 一 个 终端 的 网 站 了 。 


2. 成 本 更 低 


由 于 互联 网 友 展 迅速 ， 网 页 迭代 很 快 ， 相 比 做 两 套 版 本 ， 做 一 套 响 应 式 的 网 页 会 减少 开发 和 后 期 维护 成 本 。 一 般 情况 下 ， 不 值得 花费 大 量 时 间 做 两 套 


随时 需要 修改 的 页 面 。 做 两 套 版 本 对 后 端的 扩展 也 会 有 更 高 的 要 求 ， 可 能 会 增加 后 端 和 服务 器 端的 工作 量 。 而 且 ， 响 应 式 设 计 比较 灵活 ， 更 容易 为 不 断 到 
来 的 新 设备 做 设计 和 开发 。 


8.1.3 ” 听 应 陈设 计 思 维 


响应 陈设 计 不 仅 是 一 种 技术 更 是 一 种 思维 方式 。 在 设计 产品 时 ， 需 要 从 “交互 、 布 局 ”两 个 方面 考虑 如 何 让 产品 适应 不 同 的 设备 。 
1. 交 互 


同一 页 面 在 不 同类 型 的 设备 (手机 、 平 板 、 笔 记 本 电脑 等 ) 上 ， 应 该 支持 不 同 的 操作 方式 〈 如 鼠标 和 触 屏 ) ， 让 用 户 在 每 种 设备 上 都 能 使 用 符合 习惯 
的 交互 方式 。 


“移动 端 应 该 有 足够 大 的 按钮 ， 供 手指 操作 。 
PC 端 上 应 该 平 铺 多 个 按钮 ， 用 户 可 以 用 鼠标 精准 操作 。 
移动 端 应 该 支持 手势 操作 ， 如 侧 边栏 ， 左 涓 删除， 下拉 刷新 等 。 


` PC 端 可 以 支持 鼠标 悬浮 操作 。 


2. 布 局 
页 面 上 各 模块 在 不 同 设备 、 不 同 分 辨 率 上 ， 应 该 有 在 不 同 的 大 小 和 比例 。 图 片 应 该 有 不 同 的 分 辩 率 
: 模块 应 该 能 够 自动 调整 大 小 和 间距 ， 以 填 满 整个 页 面 。 
当 页 面 尺 寸 变动 较 大 时 ， 能 够 合并 模块 。 
当 页 面 尺 寸 变动 较 大 时 ， 隐 藏 正文 预览 、 简 介 说 明 等 较 长 的 文本 。 
-图片 在 比例 发 生变 化 时 依然 美观 可 用 。 


.导航 菜单 保持 逻辑 清晰 ， 同 时 部 分 菜单 可 隐藏 或 收 起 。 


8.2” 目 适应 视图 


Axure RP 的 “ 自 适 应 视图 ”功能 可 以 用 来 实现 响应 式 设 计 。 默 认 情 况 下 ，Auxre RP 的 画布 是 没有 高 度 和 宽度 限制 的 。 使 用 “ 自 适 应 视图 ”会 以 默认 
画布 为 “ 基 类 视图 ”， 创 建 出 同一 个 页 面 的 子 视图 。 


` 子 视 图 会 继承 基 类 视图 的 元 件 。 元 件 的 图 片 、 文 本 内 容 和 交互 动作 必须 与 基 类 视图 保持 一 致 ， 但 尺寸 、 位 置 、 样 式 等 可 以 不 同 。 


度 选 择 按 哪个 视图 来 显示 。 例 如 大 于 1024X768 时 显 类 视图 ， 


3 


` 子 视图 可 以 限制 画布 的 高 度 和 宽度 。 预 览 原型 页 面 时 ， 会 根据 浏览 器 的 高 度 、 
小 于 1024 X768 时 显示 子 视图 。 


做 响应 式 的 原型 时 ， 可 以 先 做 好 基 类 视图 的 布局 ， 适 配 一 个 终端 。 然 后 在 子 视图 中 修改 布局 ， 适 配 另 一 个 终端 。 这 样 ， 束 能 快速 做 出 适 配 多 个 终端 的 
原型 。 


8.2.1 添加 子 视 图 


介绍 如 何在 自 适 应 视图 中 添加 子 视图 。 


(1) 在 项 目 菜单 中 选择 “上 自 适应 视图 ”命令 ， 如 图 8-2 所 示 。 


(2) 在 弹出 的 “ 自 适 应 视图 ”对 话 框 中 ， 可 以 看 到 基 类 视图 的 信息 ， 包 括 名 称 和 宽度 、 高 度 设 置 ， 如 图 8-3 所 示 。 
名 称 : 默认 为 “基本 ”。 一 般 用 来 标识 基 类 视图 适 配 哪个 终端 。 


高 : 基 类 视图 是 不 限制 宽度 、 高 度 的 。 这 里 的 宽 、 高 只 影响 画布 上 显示 的 辅助 线 。 
: 一 些 常 用 设备 预 设 的 名 称 与 宽 高 。 例 如 ， 高 分 


着 率 、 平 板 横 向 /纵向 、 手 机 横向 /纵向 。 


页 面 说 明 字 段 ...(N) 


元 件 说 明 闻 段 与 配置 …(F) 


月 适应 视图 ...(AA) 


图 8-2 ”选择 “ 自 适 应 视图 ”命令 


国生 二 分 辩 率 (1200 x 任何 以 上 ) 


在 浊 览 器 中 浏览 原型 时 ， 如 果 没 有 满足 分 辩 率 条 
an , 与 分 辨 率 机 模 向 (480 x 任何 以 下 ) 


纵向 (320 x 任何 以 下 ) 


图 8-3 设置 基 类 视图 信息 


新 视图 (任何 x 任何 以 下 ) 


图 8-4 添加 子 视图 


. 名 称 : 默认 名 称 为 “新 视图 ”。 

. 条 件 : 限制 视图 大 于 等 于 或 者 小 于 等 于 菜 个 分 辩 率 。 

. 宽 、 高 ;: 子 视图 的 宽度 、 高 度 设置 影响 子 视图 的 画布 大 小 。 可 以 只 设置 其 中 一 个 值 。 

. 继承 于 : “新 视图 ”继承 于 “基本 ”。 子 视图 也 可 以 再 有 子 视图 。 在 下 拉 列 表 框 中 可 以 选择 基 类 视图 或 子 视图 。 
(4) 将 “新 视图 ” 设 为 宽度 小 于 等 于 1024， 单 击 “ 确 定 ” 按 钮 。 


(5) 在 页 面 的 “属性 ”标签 中 ， 勾 选 “ 启 用 ” 自 适 应 复 选 框 ， 如 图 8-5 所 示 。 
检视 : 内 男 
说 明 样式 


嘱 ”页 面 我 入 时 
办 ”窗口 尺寸 改变 时 
“时 ”窗口 滚动 时 


更 针 蝇 件 >>> 


VY 启用 加 


图 8-5 启用 自 适 应 


(6) 启用 上 自 适 应 之 后 ， 在 页 面 标签 下 方 会 看 到 切换 视图 的 按钮 ， 如 图 8-6 所 示 。 


Index 其 


影响 所 有 视图 


00 


图 8-6 ”切换 视图 
` 蓝 色 代表 当前 视图 。 


- 黄色 代表 当前 视图 的 子 视图 。 


8.2.2 ”继承 


子 视图 会 继承 父 视图 中 的 元 件 。 继 承 的 元 件 有 些 情 况 下 是 同步 修改 的 ， 有 些 情况 下 不 是 同步 修改 的 。 下 面 详细 介绍 两 者 的 关系 。 
1. 父 视图 被 修改 ， 子 视图 随 之 修改 


(1) 在 父 视 图 “基本 ”中 添加 一 个 矩形 ， 在 子 视 图 1024 中 会 出 现 同 一 个 和 矩形， 矩形 上 的 文字 也 相同 ， 如 图 8- 7 所 示 。 


index XX index 其 


影响 所 有 视图 基本 | 1024 影响 所 有 视图 
.J 过 本 a 


a ) 父 视 图 b ) 子 视图 


图 8-7 添加 元 件 


(2) 在 父 视图 “基本 ”中 修改 和 矩形 的 文字 为 2， 在 子 视图 1024 中 和 矩 形 上 的 文字 目 动 变 为 2， 如 图 8-8 所 示 。 


index 其 index > 


基本 影响 所 有 视图 


a ) 父 视 图 b ) 子 视图 


图 8-8 修改 文本 


(3) 在 父 视图 “基本 ”中 修改 矩形 的 位 置 、 尺 寸 ， 并 设置 填充 色 ， 如 图 8-9a 所 示 。 在 子 视 图 1024 中 的 位 置 、 尺 寸 、 样 式 都 随 之 改变 ， 如 图 8-9b 所 


index > index > 


轩 影响 所 有 视图 基本 | 1024 | 。 回 ] 影响 所 有 视图 
0 100 


a ) 父 视图 b ) 子 视图 


图 8-9 ”修改 位 置 、 尺 寸 和 样式 


(4) 在 父 视 图 “基本 ”中 删除 和 矩形 元 件 ， 在 子 视图 1024 中 也 会 自动 删除 矩形 元 件 。 


2. 子 视图 中 修改 过 的 元 件 不 再 随 父 视图 的 修改 而 改变 


(1) 在 父 视 图 “基本 ”中 添加 起 形 元 件 ， 然 后 在 子 视图 1024 中 将 和 窍 形 设置 为 绿色 ， 如 图 8-10 所 示 。 


(2) 在 父 视图 “基本 ”中 ， 缩 小 矩形 的 尺寸 ， 向 右 下 方 移动 算 形 的 位 置 ， 并 将 息 形 设 为 红色 。 然 后 对 比 两 个 视图 ， 如 图 8-11 所 示 。 可 以 友 现 子 视 图 
只 有 尺寸 友 生 了 改变 ， 但 样式 和 位 置 都 没有 随 父 视图 的 改变 而 变 。 


gm 四 | 影响 所 有 视图 二 二 本 回 影响 所 有 视图 


b ) 子 视图 
图 8-10 ”修改 子 视 图 的 颜色 
index 其 


影响 所 有 视图 [| 影响 所 有 视图 
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是 要 


a ) 父 视 图 b ) 子 视图 
图 8-11 修改 父 视图 尺寸 、 位 置 和 样式 
(3) 拉 长 子 视图 “1024” 中 和 矩 形 的 宽度 ， 表 缩小 父 视图 “基本 ”中 和 矩 形 的 壳 度 。 对 比 两 个 视图 ， 如 图 8-12 所 示 。 可 以 友 现 修改 过 子 视图 的 宽度 后 ， 


子 视图 的 宽度 不 再 随 父 视图 的 改变 而 改变 了 。 


index > index > 


0 100 z 
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a ) 父 视 图 b ) 子 视图 


图 8-12 ”修改 两 个 视图 的 尺寸 


3. 在 子 视图 中 修改 样式 ， 父 视图 不 随 之 修改 


(1) 在 父 视 图 “基本 ”中 添加 矩形 元 件 ， 然 后 在 子 视图 “1024” 中 修改 元 件 的 位 置 、 尺 寸 和 样式 ， 如 图 8-13 所 示 。 查 看 父 视图 ， 可 以 看 到 父 视图 没 
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b ) 子 视 图 
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图 8-13 ”修改 子 视 图 人 位置、 尺寸 和 样式 


(2) 在 子 视图 “1024” 中 添加 椭圆 形 元 件 。 查 看 父 视图 “基本 ”， 可 以 看 到 父 视图 没有 变化 ， 如 图 8-14 所 示 。 


index index 
本 影响 所 有 视图 中 。 基本 回 P09 所 有 视图 
0 100 


SO 


图 8-14 ” 子 视 图 添加 元 件 


(3) 删除 子 视图 “1024” 中 的 两 个 元 件 。 查 看 父 视图 “基本 ”， 可 以 看 到 父 视图 没有 变化 ， 如 图 8-15 所 示 。 


(4) 查看 子 视图 “1024” 的 元 件 地 图 。 可 以 看 到 椭圆 形 元 件 已 经 被 彻底 删 掉 了 ， 和 矩形 变 成 红色 ， 如 图 8-16 所 示 。 红 色 代 表 和 矩形 元 件 存 在 于 其 他 视图 
中 ， 但 在 本 视图 中 不 显示 。 


(5) 右 击 红色 的 矩形 ， 在 弹出 的 快捷 菜单 中 选择 “在 视图 中 显示 ”命令 ， 如 图 8-17 所 示 。 和 矩形 会 重新 出 现在 子 视图 中 ， 恢 复 到 图 8-13b 所 示 的 状 
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b ) 子 视图 


图 8-15 ”删除 子 视图 元 件 


图 8-16” 子 视图 的 元 件 地 图 


4. 在 子 视图 中 修改 文字 、 交 互 ， 父 视图 随 之 修改 


(1) 继续 上 文案 例 ， 在 子 视图 “1024” 中 的 算 形 上 添加 文字 “123”。 碍 看 父 视 图 “基本 ” ， 可 以 看 到 矩形 的 文字 随 忆 改变 了 ， 如 图 8-18 所 示 。 
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b ) 子 视 图 
图 8-18 ”在 子 视图 中 修改 文字 
(2) 在 子 视图 “1024“ 的 “鼠标 单 击 时 ”事件 中 添加 用 例 case1。 查 看 父 视 图 “基本 ″′ ， 可 以 看 到 和 矩形 中 也 增加 了 用 例 case1。 
5.“ 影 响 所 有 视图 ” 复 选 框 
如 果 勾 选 了 “影响 所 有 视图 ” 复 选 框 ， 那 么 在 子 视图 中 的 所 有 修改 ， 父 视图 都 会 随 之 改变 。 
继续 上 文案 例 ， 勾 选 “影响 所 有 视图 ” 复 选 框 后 ， 将 子 视图 “1024” 中 的 矩形 设 为 红色 。 查 看 父 视图 “基本 ” ， 可 以 看 到 和 矩形 随 之 变 为 红色 了 ， 如 


图 8-1 9 所 示 。 
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图 8-19 ”在 子 视图 中 修改 颜色 


8.3 案例 18: 响应 式 网 站 


下 面 以 一 个 实际 项 目 为 例 ， 介 绍 8.1.1 节 中 的 网 站 如 何 实现 。 


. 利用 自 适应 视图 实现 响应 式 网 站 原型 。 在 原型 宽度 大 于 1000 像 素 时 ， 使 用 适用 于 PC 端的 布局 ， 如 图 8-20a 所 示 。 在 原型 宽度 小 于 1000 像 素 时 ， 使 用 
适用 于 移动 端的 布局 ， 如 图 8-20b 所 示 。 


可 


` 通过 设置 动作 ， 让 原型 页 面 上 的 元 件 随 浏览 器 窗口 大 小 自动 调整 宽度 。 窗 口 帘 时 ， 元 件 宫 ， 如 图 8-20b 所 示 ; 窗口 罕 时 ， 元 件 宕 ， 如 图 8-20c 所 示 。 
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a ) 宽度 1200 像素 b ) 宽度 800 像素 2 


图 8-20 ”案例 效果 


8.3.1 ” 目 适 应 视图 改变 布局 


本 例 中 ， 视 图 的 整体 规划 是 在 基 类 视图 中 制作 PC 应 的 布局 。 在 目 适 应 视图 中 添加 子 视 图 ， 在 子 视图 中 制作 移动 端的 布局 。 


(1) 在 新 建 原型 中 ， 设 置 自 适应 视图 ， 如 图 8-21 所 示 。 


RP 自 适 应 视图 


移动 端 (1000 x 任何 以 下 ) 


图 8-21 设置 自 适 应 视图 
` 添加 “基本 ”视图 的 子 视图 ， 名 称 为 “移动 端 ”。 
` 条 件 为 宽度 小 于 等 于 1000 像 素 。 
(2) 设置 完成 后 ， 在 Axure RP 中 可 以 看 到 两 个 切换 视图 的 按钮 “基本 ”按钮 和 “1000” 按 钮 。 


(3) 在 “基本 ”视图 中 ， 添 加 元 件 组 成 一 个 网 站 原型 ， 如 图 8-22 所 示 。 将 “基本 ”视图 的 宽度 控制 在 1000 像 素 以 内 。 
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同 壹 的 情况 下 ， 也 可 以 煌 整个 公司 赤 给 也 人 。 
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图 8-22 “基本 ” 视图 


. 标题 栏 : 背景 用 动态 面板 实现 。 设 置 面板 的 背景 色 为 白色 ， 然 后 设置 面板 为 100% 宽 度 。 这 样 标题 栏 的 宽度 会 随 窗口 的 宽度 而 变化 。 
. 热点 图 片 : 不 直接 添加 图 片 而 是 添加 动态 面板 ， 然 后 设置 图 片 为 背景 图 片 。 这 样 方便 后 续 对 图 片 的 修改 。 


. 快捷 消息 : 用 前 文案 例 中 的 方法 设 为 可 切换 的 标签 页 。 
.新闻 列 表 : 添加 新 闻 图 片 、 标 题 、 作 者 、 时 间 和 预览 等 信息 。 
(4) 在 “1000” 视 图 中 ， 修 改 页 面 布 局 ， 如 图 8-23 所 示 。 


` 化 简 标 题 栏 : 删除 标题 栏 上 多 余 的 按钮 。 窗 口 比较 窄 时 ， 只 保留 搜索 和 “更 多 按钮 。 将 “搜索 ”按钮 和 “更 多 ”按钮 组 合 ， 并 命名 为 “搜索 区 更 


-添加 列表 分 类 : 将 快捷 消息 与 新 闻 列 表 人 合并。 删除 原来 的 快捷 消息 ， 添 加 4 个 天 形 元 件 ， 代 表 包 括 快 捷 消 息 在 内 的 4 个 分 类 。 在 短 形 上 填写 分 类 名 。 


将 4 个 标签 分 分 别 命 名 为 “标签 1” “标准 2 “标签 3” “标签 4” , 


` 放大 热点 图 片 : 窗口 比较 窄 时 ， 只 保留 一 张 热点 图 片 即 可 。 删 除 其 他 图 片 ， 将 留 下 的 面板 命名 为 “热门 图 片 1 。 将 面板 中 的 文字 命名 为 “热门 标 
题 1”。 
. 化 简 新 闻 列 表 : 拉 长 列表 的 宽度 。 列表 中 的 正文 预览 信息 。 将 背景 框 分 别 命 名 为 “新 闻 1”“ 新 闻 2”“ 新 闻 3”。 将 标题 分 别 命名 为 “标题 


1” “标题 2” “标题 3” , 


所 有 元 素 都 要 保持 在 边界 以 内 ， 否 则 用 户 看 不 到 。 
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36 考 的 遇 坡 习 
视图 边界 线 


图 8-23 “1000” 视 图 


(5) 预 蜗 原型 。 调 整 窗口 大 小 ， 可 以 看 到 窗口 宽度 大 于 1000 像 素 或 小 于 1000 像 素 时 ， 页 面 的 布局 是 不 同 的 。 


8.3.2 ”窗口 改变 时 调整 元 件 宽度 
在 窗口 宽度 不 同时 ，PC 端 页 面 上 的 元 件 保持 在 页 面 上 居中 即 可 。 移 动 端 页 面 上 的 元 件 最 好 能 根据 窗口 宽度 不 同 而 改变 自身 宽度 。 
1.“ 基 本 ”视图 


“基本 ”视图 是 PC 站 的 布局 。 只 要 设置 页 面 排列 方式 ， 即 可 保持 元 件 在 页 面 上 居中 显示 。 


(1) 设置 页 面 排列 方式 为 居中 ， 如 图 8-24 所 示 。 


图 8-24 设置 页 面 排列 


(2) 这 样 ， 在 窗口 宽度 大 于 1000 像 素 时 ， 标 题 栏 背景 会 随 页 面 宽 度 变 化 而 变化 ， 页 面 其 他 元 素 会 始终 保持 居中 ， 如 图 8-25 所 示 。 
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3 le 
用 数据 化 的 方式 解析 投资 东南 之 十 :最 坊 攻 的 Drag- 
along 
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同意 的 情 襄 下， 也 可 以 将 整个 公司 卖 给 他 人 。 


万 干 热 亲自 媒体 世 换 不 来 的 深度 报道 ， 


巨 尖 习 对 日 媒体 如 此 导 慨 大方 ， 动 斩 以 亿 为 计算 单位 ， 对 商业 这 度 调 查 ， 是 十 是 芒 给 出 


= 十 分 之 一 的 大 方 呢 ? 


图 8-25 ”宽度 大 于 1000 像 素 时 


.“1000” 视图 


“1000” 视 图 是 移动 端 布局 。 要 实现 元 件 宽 度 的 动态 变化 ， 需 要 在 窗口 宽度 变化 的 触发 事件 中 ， 设 置 改 变 元 件 尺寸 的 动作 。 


(1) 在 “1000” 视 图 中 ， 找 到 “窗口 尺寸 改变 时 ”事件 。 在 事件 中 添加 条 件 : 自 适 应 视图 等 于 “移动 端 ”， 如 图 8-26 所 示 。 


提示 : 


页 面 的 交互 动作 在 父 视图 和 子 视图 中 是 保持 一 致 的 。 如 果 布 望 交互 动作 只 针对 某 个 视图 生效 ， 就 需要 在 用 例 的 条 件 中 限制 视图 。 


Rp 条 件 设立 


符合 | 全 部 以 下 条 件 


自 适 应 视图 


图 8-26 窗口 尺寸 改变 时 


(2) 在 用 例 中 添加 动作 一 一 设置 元 件 尺 寸 ， 如 图 8-27 所 示 。 


配置 动作 
选择 山 整 大 寸 的 元 件 


局 [动态 面 概 ) 
划 | | shadow (动态 面板 ) 
局 热点 图 片 1 (动态 面板 ) to [[Window.width-30]] x 279 anchor 左上 角 
执 癌 标题 1 (矩形 ) to [[Window width-90]] x 21 ancher 左上 骨 
三 | | shadow (动态 面板 ) 
同 新 闻 1 (矩形 ) 
用 上 | 快讯 next (动态 面板 ) 
4 下 | 搜索 & 更 多 (组 合 ) 
国 3 {图片 ) 
四 | 标题 栏 {动态 面板 ) 
辣 新 闻 2 (矩形 ) 
辣 新 闻 3 (矩形 ) 


1 


完 [[Window.width-30]] fx 
局 279 fx 
销 点 | 左上 角 = 

动画 无 | 时 间 500 室 秒 


图 8-27 设置 热点 图 片 宽度 


` 将 “热点 图 片 1 的 宽度 设 为 [Window.width-30]， 即 窗口 宽度 减 30。 “热点 图 片 1 初始 横 坐 标 值 为 15。 设 置 了 宽度 之 后 ，“ 热点 图 片 1 会 处 于 页 


面 中 央 ， 距 离 窗口 左右 边缘 各 15 像 素 。 
. 将 “热点 图 片 1” 的 高 度 设 为 279， 即 保持 初始 高 度 不 变 。 
“热点 图 片 1 ”是 一 个 动态 面板 。 它 的 背景 图 片 设 为 “填充 ”模式 时 ， 会 随 着 面板 的 大 小 自动 调整 背景 图 片 的 大 小 。 
. 将 “热点 标题 1” 的 宽度 设 为 [Window.width-90 有 ， 即 “热点 标题 1” 会 加 宽 到 距离 窗口 边缘 各 45 像 素 。 


. 将 “热点 标题 1” 的 高 度 设 为 21 ， 即 保持 初始 高 度 不 变 。 


提示 : 
Window.width 变 量 等 于 窗口 的 宽度 。 


(3) 预 贞 原型 。 改 变 窗口 宽度 时 ， 热 点 图 片 的 宽度 会 随 着 窗口 改变 而 改变 ， 热 点 图 片 始 终 保 持 距 离 窗口 左右 边缘 各 15 像 素 ， 如 图 8-28 所 示 。 
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图 8-28 ”设置 热点 图 片 的 尺寸 


(4) 按 同 样 的 方法 , 设置“ 新闻 1”“ 新 闻 2”“ 新 闻 3” 和 “标题 1 “标题 2 “标题 3” 的 尺寸 ， 如 图 8-29 所 示 ， 保 证 这 些 元 件 随 窗口 宽度 而 变 
化 ° 


. 新 闻 背 景 框 的 宽度 设 为 [Window.width-30]]。30 是 初始 横 坐 标 15 加 上 距离 右边 15 像 素 得 到 的 。 这 样 保证 了 新 闻 背 景 框 的 宽度 与 热点 图 片 相同 。 


` 标题 的 宽度 设 为 [Window.width-215]] 。215 是 初始 横 坐 标 195， 加 上 距离 窗口 右边 毕 15 像 素 ， 再 加 上 距离 新 闻 背 景 框 右边 缘 5 像 素 得 到 的 。 这 样 可 以 
保证 标题 始终 在 新 闻 背 景 框 内 ， 且 随 着 窗口 变化 而 改变 宽度 。 


(5) 标题 需要 设 为 “自动 调整 文本 高 度 ”， 但 不 需 “ 上 自动 调整 文本 宽度 ”， 如 图 8-30 所 示 。 这 样 在 标题 宽度 改变 之 后 ， 如 果 标 题 中 的 文字 一 行 显示 
不 下 ， 则 会 目 动 换行 。 


提示 : 
文本 元 件 的 边缘 为 黄色 ， 表 示 元 件 会 在 这 个 方向 上 根据 内 容 自 动 调整 ; 
文本 元 件 的 边缘 为 白色 ， 表 示 元 件 在 这 个 方向 上 固定 长 度 。 


例如 ， 图 8-30 中 的 文字 纵向 会 自动 调整 大 小 ， 横 向 是 固定 的 。 


天 商 口 尺寸 改变 时 


本 Case1 
(lf 当前 自 适 应 视图 == 移动 揣 ) 
入 设置 尺寸 于 热点 图 片 1 to [[Window.width-30]] x 279 anchor 左上 角 ， 
热点 标题 1 to [[Window.width-90]] x 21 anchor 左上 角 


者 生生 六 年 自 "m 


设置 尺寸 于 薄 国 3 to [TWindow_width-30]] x 125 ancher 左上 骨 ， 
新 闻 2 to [[Window.width-30]] x 125 anchor 左上 骨 ， 
新 闻 1 to [[Window.width-30]] x 125 anchor 左上 骨 ， 
标题 1to [[Window.width-215] x 21 anchor 左上 角 ， 
标题 2 to [[Window_width-215]] x 21 anchor 左上 有 角 ， 
| Vindow.width-215]] x 21 anchor 左上 人骨 


图 8-29 ”设置 新 闻 列 表 的 尺寸 


堵 据 冰山 | 


图 8-30 ”标题 自动 调整 文本 高 度 
(6) 标签 的 尺寸 设置 完成 之 后 ， 还 要 将 标签 移动 到 新 的 位 置 ， 如 图 8-31 所 示 。 
. 将 标签 宽度 设 为 [Window.width/4， 即 1/4 窗 口 宽度 。4 个 标签 刚好 填 满 整 个 窗口 。 
` 不 移动 “标签 1 ”， 将 “标签 2” 移 动 到 1/4 窗 口 宽度 的 位 置 ， 将 “标签 3” 移 动 到 2/4 窗 口 宽度 的 位 置 ， 将 “标签 4 ”移动 到 3/4 窗 口 宽度 的 位 置 。 


(7) 移动 “搜索 ”“ 更 多 ”按钮 ， 如 图 8-32 所 示 。 让 两 个 按钮 始终 保持 在 横 坐 标 为 [Window.width-170]] 的 位 置 使 两 个 按钮 始终 与 窗口 右边 绿 保持 


固定 距离 。 


站 上 别 窗 口 尺寸 改变 时 


是 症 Case1 
(lf 当前 目 适应 视图 == 移动 蜗 ) 
和 设置 尺寸 于 热点 图 片 1 to [[Window.width-30]] x 279 anchor 左上 角 ， 
热点 标题 1 to [[VWindow.width-90]] x 21 anchor 左上 角 
球 设置 尺寸 于 新 闻 3 to [[Windowwidth-30]] x 125 anchor 左上 角 
新 闻 2 to [[Window.width-30]] x 125 anchor 左上 角 ， 
新 闻 1 to [PWindow.width-30]] x 125 anchor 左上 角 ， 
标题 1 to [[Window.width-215]] x 21anchor 左上 角 ， 
标题 2 to [PWindow.width-215]] x 21 anchor 左上 角 . 
标题 3 to [[Window.width-215]] x 21 anchor 左上 骨 


设置 尺寸 于 标签 1 to [[Window.width/4]] x 81 anchor 左上 角 ， 
标签 2 to [[Window.width/4]1x 61 anchor 左上 骨 ， 

标签 3 to [[Window.width/4]]x61 anchor 左上 骨 ， 

标签 4 to [|[Window.widthi4| x 1 anchor 左上 角 

移 功 标 等 3 to ([[Window.widthi4*3]],60), 

标签 4 to ([[Vindow widthi4*21],60). 

标 竺 2 to ([[Windowwidth/4]],60) 


图 8-31 标题 自动 调整 文本 高 度 


“时 窗口 尺寸 改变 时 


有 Casel | 
(lf 当前 目 适 应 视图 == 移动 in) 
奢 ”设置 尺寸 于 热点 图 片 1 to [IWindowwidth-30]] x 279 anchor 左上 角 ， 
”热点 标题 1 to [[Window.width-90]] x 21 anehor 左上 角 
肠 ” 设 置 尺寸 于 新闻 3 to [[Windowwidth-30]] x 125 anchor 左上 角 ， 
新 闻 2 to [[Window.width-30]] x 125 anchor 左上 骨 ， 
新 闻 1 to [[VWindowwidth-30]] x 125 anchor 左上 角 ， 
标题 1 to [[VWindow.width-215]] x 21 anchor 左上 角 ， 


标题 2 to [[window.width-215]] x 21 aneher 左上 角 ， 
标题 3 to [[Window.width-215]] x21anchor 左上 印 


调 置 尺寸 于 标 答 1 to [[Window widthi4]] x 61 anchor 左上 骨 . 
标 等 2 to [[Window.width/4]] x 61 anchor 左上 角 ， 
标 符 3 to [[Window.width/4]] x 61 anchor 左上 人 角 ， 
标签 4 to [[Window.width/4]] x 61 anchor 左上 角 
时” 移动 标 等 3 to ([[Windowwidth/4*3]],60), 
标签 4 to (I[Windowwidth/4:2]].60). 
标签 2 to ([[Window.width/4]].60) 
村 移动 搜索 & 更 多 to ([[Windowwidth-170]],17) 


图 8-32 移动 “搜索 ” “更 多 » 按钮 


(8) 预 抱 原型 。 可 以 看 到 原型 在 宽度 1000 像 素 以 上 时 ,布局 为 “基本 ”视图 样式 。 宽 度 在 1000 像 素 以 下 时 ,布局 为 “1000” 视 图 样式 ， 而 且 视 图 
中 所 有 元 件 都 会 自动 调整 、 适 应 窗口 的 大 小 。 


日 的 原型 


Axute RP 原型 一 般 在 计算 机 上 展示 。 如 果 要 做 的 产品 是 手机 APP， 或 基于 微 信 公众 号 的 H5 页 面 等 ， 让 原型 在 手机 上 展示 会 更 直观 、 更 方便 。 要 让 原型 
能 在 手机 上 访问 ， 需 要 满足 以 下 两 个 条 件 : 


` 原型 的 尺寸 合适 ， 方 便 在 手机 上 查看 。 


` 生成 分 享 链接 ， 手 机 可 以 直接 打开 。 


9.1 ”让 原型 适应 手机 尺寸 


想 让 原型 在 手机 上 以 合适 的 尺寸 展示 ， 需 要 在 制作 原型 前 就 规划 好 原型 的 尺寸 。 还 要 设置 合适 的 “ 视 口 标签 ”， 让 手机 浏览 器 以 合适 的 缩放 比例 打开 
原型 。 


9.1.1 ”设置 适应 手机 的 原型 尺寸 


手机 的 分 辩 率 与 Axure RP 原型 的 宽度 、 高 度 不 是 一 一 对 应 的 。 要 理解 这 个 问题 ， 首 先 要 理解 以 下 两 个 概念 。 
` 物理 分 辩 率 : 是 指 手机 屏幕 最 高 可 显示 的 像素 数 。 人 们 常 说 的 手机 分 辨 率 说 的 就 是 手机 的 物理 分 辩 率 。 


逻辑 分 辨 率 : 是 指 软件 的 分 辩 率 。 市 面 上 各 种 手机 的 物理 分 辨 率 千差万别 ,但 逻辑 分 辨 率 只 有 相同 的 几 种 。 相 关 人 员 做 软件 时 只 需 按 少数 几 种 逻辑 
分 辨 率 来 设计 。 软 件 运行 时 系统 会 自动 泻 染 ， 将 还 辑 分 辨 率 大 小 的 界面 填 满 物理 分 辨 率 大 小 的 屏幕 。 


Axure RP 中 ， 原 型 的 宽度 、 高 度 对 应 的 是 逻辑 分 辨 率 。 人 在 做 原型 前 ， 可 以 先 查 好 目标 设备 的 逻辑 分 辨 率 ， 再 按照 逻辑 分 辨 率 制作 原型 。 一 般 ， 将 原 
型 的 宽度 控制 在 360 像 素 左右 即 可 适 配 大 多 数 手 机 。 


提示 : 


在 第 8 章 中 讲 的 一 些 技巧 ， 如 将 标题 栏 动态 面板 设置 为 100% 帘 度 、 动 态 设 置 列表 宽度 为 [[window.widthj]j 等 ， 可 以 应 用 在 这 里 ， 让 适 配 更 精准 。 


9.1.2 ”通过 钢 口 标 符 ， 让 原 王 目 适应 浏 和 让 
浏览 器 打开 网 页 时 ， 会 形成 一 个 虚拟 的 窗口 ， 网 页 按 自身 分 辩 率 被 装 入 这 个 窗口 。 当 网 页 大 于 浏览 器 时 ， 用 户 可 以 通过 平移 和 缩放 来 查看 网 页 的 其 余 
部 分 。 这 个 窗口 叫做 “ 视 口 


视 口 有 “ 视 口 标签 ”， 可 以 设置 缩放 规则 。 例 如 ， 通 过 设置 视 口 标签 ， 可 以 让 视 口 的 宽度 等 于 浏览 器 的 宽度 ， 用 户 可 以 不 用 手动 缩放 ， 可 以 直接 看 到 


一 


最 佳 显示 效果 。 
介绍 如 何在 Axure RP 中 设置 “ 视 口 标签 ”。 
(1) 单 击 “ 友 布 ”按钮 ， 在 弹出 的 荣 单 中 选择 “预览 选项 ” 售 令 ， 如 图 9-1 所 示 。 


(2) 在 弹出 的 “ 预 蜗 选项 ”对 话 框 中 ， 单 击 “ 配 置 ”按钮 ， 如 图 9-2 所 示 ， 进 入 编辑 配置 文件 的 界面 。 配 置 文件 是 用 来 控制 “生成 HTML 文 件 ” 策 略 


的 。Axure RP 中 默认 的 配置 文件 名 称 为 “HTML 1”。 


(3) 在 “生成 HTML<HTML 1>” 对 话 框 中 ， 选 择 左 侧 导 航 中 的 “移动 设备 ”选项 。 在 右 侧 页 面 中 可 以 看 到 视 口 标签 的 选项 设置 ， 如 图 9-3 所 示 。 


预 点 F5 
预 点 选项 ...( 口 ) Ctrl+F5 
点 布 到 Axshare...(A) F6 


生成 HTML 文 件 ...(H) F8 
在 HTMLXXY 件 中 重新 生成 当前 页 面 (R) Ctrl+F8 
生成 Word 说 明 书 .…(G] F9 
更 多 生成 器 和 配置 文件 (MI) 


图 9-1 选择 “预览 选项 ”命令 


ap 预 兄 选 项 

选择 预览 HTML 的 配置 文件 
HTML 1 (default) 
打开 - 


济 史 路 工具 性 
图 默认 章 殉 如 加 | 开启 页 面 列表 


〇 不 打开 加 ) 关闭 页 面 列 表 
〇 Edge 二 ) 最 小 化 工具 柱 
〇 IE 浏览 器 〇 不 加 载 工 具 栏 


图 9-2 “预览 选项 ”对 话 框 


XE 


gp 生成 HTML<HTML 1> 


移动 设备 
页 面 
元 件 襄 明 宽度 ( px 或 者 device-width ) device-width 
交互 高 度 ( px 或 者 device-height ) 
站 二 4 下 “jr 
标 初始 缩放 倍数 (0-10.0) 
"Web 字体 下 
主体 映射 最 小 编 放 倍数 (0-10.0) 
移 设 全 | | | 最大 缩放 倍数 (0-10.0) 
高 级 | | | 匈 许 用 户 缩放 (no 或 blank) 


司 禁止 页 面 垂直 濠 动 
六 | 目 动 枪 测 并 链接 电话 号 码 (IQS) 
主屏 图 标 ( 推 荐 使 用 114*114 像 素 的 png 图 像 文 件 ) 


导入 | 清除 
IOS 启 动画 面 设置 
iPhone iPad 纵 向 iPad 档 向 
320x460px png 768x1004px png 748x1024px png 
| | 号 入 | | BA | 导入 
清除 ”清除 | ”清除 


避 隐 闻 浏览 器 导航 栏 (从 iCQS 主 屏 启 动 时 ) 


iDS 状态 性 样式 由 fault 
加 1 人 信和 为 default( 日 色 ), 可 选 black( 黑 色 ) 或 black-translucent( 灰 色 半 透 
明 )。 


图 9-3” 视 口 标 签 的 选项 设置 


` 宽度 : 控制 “ 视 口 ” 的 宽度 。 可 以 填写 一 个 固定 数值 ， 如 600 (单位 是 pg， 是 物理 分 状 率 ) 。 默 认 选 项 为 device-width， 表 示 将 宽度 设 为 设备 的 宽 


高 度 : 控制 “ 视 口 ”的 高 度 。 通 常 原型 各 页 面 的 高 度 都 不 同 ， 所 以 通常 不 设置 高 度 。 

: 初始 缩放 倍数 : 控制 页 面 加 载 出 来 时 ， 默 认 以 什么 缩放 比例 显示 。 默 认 选 项 为 1， 一 般 不 用 改 。 
: 最 大 缩放 倍数 : 允许 用 户 缩放 的 最 大 比例 。 一 般 不 用 填 ， 不 做 限制 。 

: 最 小 缩放 倍数 : 允许 用 户 缩放 的 最 小 比例 。 一 般 不 用 填 ， 不 做 限制 。 


. 允许 用 户 缩放 : 控制 用 户 是 否 可 以 手动 缩放 。 如 填 no 表 示 不 允许 ， 如 不 填 表 示人 允 许 。 一 般 不 填 ， 允 许 用 户 可 以 手动 微调 。 


9.2 ”生成 分 对 链接 


查看 原型 有 多 种 方法 ， 其 中 以 下 两 种 方法 只 能 在 计算 机 上 用 。 
` 预览 功能 : 自动 打开 一 个 本 地 网 址 ， 查 看 原型 。 
` 用 发 布 功能 生成 HTML 文 件 ， 直 接 打 开 HTML 文 件 查 看 原型 。 
在 手机 上 查看 原型 ， 需 要 以 下 几 步 : 
(1) 生成 HTML 文 件 。 
(2) 将 HTML 文 件 保 存 到 服务 器 上 。 
(3) 获取 服务 器 的 网 址 。 


(4) 在 手机 上 打开 网 址 查看 原型 。 


9.2.1 注册 Axure Share 账 号 并 分 享 原型 


Axure 公 司 有 一 个 原型 分 享 平台 Axure Share。Axure RP 软件 自 带 上 传 原型 到 Axure Share 的 功能 。 使 用 这 个 功能 ， 会 自动 生成 HTML 文 件 ， 并 上 传 
到 Axure Share 平 台 的 服务 器 上 ， 最 后 返回 服务 器 上 原型 的 网 址 ， 这 个 网 址 可 以 直接 在 手机 上 访问 。 (Axure 公 司 自身 升级 换代 ， 以 前 是 Axshare， 现 在 


是 Axure Share) 


下 面 介 绍 使 用 Axure Share 的 方法 。 


(1) 使 用 Axure share 之 前 ， 需 要 拥有 一 个 Axure RP 的 账户 。 在 菜单 栏 中 单 击 “ 账 户 ”， 在 弹出 的 菜单 中 选择 “登录 你 的 Axure RP 账 号 ”命令 。 在 
弹出 的 对 话 框 中 ， 可 以 注册 或 登录 Axure RP 账 户 ， 如 图 9-4 所 示 。 注 册 流程 与 其 他 网 站 类 似 ， 这 里 不 再 歼 述 。 


(2) 登录 Axure RP 账 户 之 后 ， 单 击 “ 友 布 ” 按 钮 。 在 弹出 的 菜单 中 选择 “发 布 到 AxShare” 命 令 ， 如 图 9-5 所 示 。 
(3) 在 弹出 的 对 话 框 中 ， 可 以 编辑 配置 文件 。 创 建新 项 目 时 还 可 以 进行 如 下 设置 ， 如 图 9-6 所 示 。 
名 称 : 可 以 设置 原型 项 目 在 Axure Shate 平 台 上 的 名 称 。 


" 黎 码 : 可 以 给 原型 加 密码 。 宽 码 需 超过 4 人 位。 加密 原型 分 享 给 别人 后 ， 别 人 需要 输入 密码 才能 访问 。 


人 及 I 户 
登录 您 的 账 
Log In to publish and host files with Axure Share. Share prototypes with 


your team and with clients. Co-author protoypes and specifications (Team 
and Enteprise Editions only). 


i 


邮箱 
tuoshiti@live.cn 
密码 


预 贞 
预 克 选项 ...(O 〇 ) Ctrl+F5 
发 布 到 AxShare...(A) F6 


生成 HTML 文 件 ...(H) F8 

在 HTMLX 件 中 重新 生成 当前 页 面 (R) Ctrl+F8 
生成 Wordim 明 书 ...(G) F9 

更 多 生成 器 和 配置 文件 (M) 


图 9-5 选择 “发 布 到 AxShare” 命令 


文件 夹 : 可 以 将 原型 放 在 不 同 的 文件 夹 中 。 在 原型 比较 多 时 ， 方 便 分 类 整理 。 


(4) 输入 好 名 称 等 信息 后 ， 即 可 发 布 。 发 布 的 过 程 包含 上 传 原型 文件 到 Axure Share 服 务 器 的 过 程 ， 可 能 较 慢 。 发 布 成 功 之 后 ， 弹 出 发 布 成 功 对 话 
框 ， 如 图 9-7 所 示 。 窗 口中 的 链接 就 是 原型 的 地 址 。 


np = FAN Share 


图 9-6 ”创建 新 项 目 


点 布 到 Axure Share 


您 的 Axure Share 原 型 页 面 链接 为 : 


您 可 以 继续 使 用 Axure RP 发 布 。 


点 布 成 功 ! 


图 9-7 发布 成 功 
提示 : 
原型 地 址 的 前 级 就 是 原型 在 Axure Share 平 台 上 的 项 目 ID。 


(5) 如 果 修 改 了 原型 ， 可 以 将 最 新 的 原型 更 新 到 Axure Share 平 台 。 重 复 第 (2) 步 ， 再 次 进入 “发 布 到 Axure Share” 对 话 框 ， 如 图 9-8 所 示 。 已 
发 布 的 项 目 会 自动 选择 “ 某 换 现 有 项 目 ” 选 项 ， 项 目 1D 会 自动 填写 。 


pp 点 布 到 AxuUre Share 


项 目 ID |WxL916 


图 9-8 替换 现 有 项 目 


(6) 蔡 换 成 功 后 ，Axure Share 平 台 会 更 新 原型 ， 但 原型 的 网 址 不 会 改变 。 


9.2.2 利用 “新 痕 云 ” 自 建 原型 服务 器 

由 于 Axure Share 的 服务 器 在 国外 ， 访 问 Axure Share 上 的 原型 ， 加 载 速 度 比较 慢 。 如 果 原 型 比较 大 时 ， 加 载 速 度 问 题 就 更 严重 。 为 了 解决 这 个 问 
题 ， 可 以 自己 建立 一 个 服务 器 ， 将 原型 上 传 到 自 建 的 服务 器 上 ， 这 样 查看 原型 会 更 流畅 。 

近年 来 ， 云 服务 商 越 来 越 多 ， 自 己 搭建 服务 器 也 成 了 一 件 可 以 “一 键 搞定 ”的 事 。 以 “新 沪 云 ”为 例 ， 搭 建 服务 器 只 需 如 下 几 步 : 

(1) 注册 成 为 “新 浪 云 ”开发 者 。 


(2) 进入 云 应 用 的 控制 台 ， 如 图 9-9 所 示 ， 单 击 “ 创 建新 应 用 ”按钮 。 


四 平台 应 用 汇总 报警 扣 醒 设置 


17 年 07 月 > 


近 一 周 ( 不 包括 今天 ] 二 


4820 


应 用 信息 近 30 天 云 豆 消耗 {不 包括 今天 ) 


axUre 坏 习 党 1306.2 
httpiiiibaxure. applinzi. com 


hongbaocaical 
http:ishongbhaoccaical.apolinzi.com 


图 9-9 ” 云 应 用 控制 台 


(3) 按 提示 步骤 创建 一 个 新 的 PHP 空 应 用 ， 如 图 9-10 所 示 。 这 里 的 “应 用 ” 指 的 就 是 一 个 自 带 常用 功能 的 服务 器 。 


当前 部 署 信息 


"| | 入 开发 放言 PHP 
本 运行 环境 。 标准 分 布 式 运行 环境 

语言 版 本 5.6 

当前 度 付 多 额 有 元 


java ode,J 全 


报 夫 为 些 ， 服 务必 将 


app lneicom 


图 9-10 创建 应 用 
(4) 进入 刚 创 建 的 应 用 主页 ， 在 “应 用 ”菜单 中 找到 “代码 管理 ”选项 ， 如 图 9-11 所 示 。 


(5) 在 弹出 的 “代码 管理 ”界面 中 ， 创 建 一 个 版 本 ， 如 图 9-12 所 示 。 因 为 我 们 不 是 用 来 研发 的 ， 所 以 创建 一 个 版 本 就 够 用 了 。 


代码 管理 ”选项 


图 9-11 


图 9-12 创建 版 本 
(6) 回 到 “代码 管理 ”界面 ， 如 图 9-13 所 示 。 


代码 管理 


+ 创建 版 本 


版 本 创建 时 间 链接 


2015-10-23 16:13:47 http: //4.1baxure.applinzi.ce 开 月 1 小玉 关闭 妓 刁 编辑 代码 土 竺 代码 和 包 出 队 


图 9-13 “代码 管理 ”界面 
. 单 击 “ 上 传代 码 包 ”， 即 可 上 传 Axure RP 生成 的 HTMIL 文 件 的 压缩 包 。 
` 单 击 “编辑 代码 ”， 即 可 查看 已 上 传 的 文件 。 


(7) 单 击 “ 编 辑 代 码 ”， 进 入 代码 页 面 。 页 面 左 侧 就 是 上 传 的 文件 夹 和 HTML 文 件 。 右 击 原型 的 index.html 文 件 ， 即 可 打开 网 址 ， 查 看 原型 ， 如 图 
9-14 所 示 。 
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图 9-14 访问 原型 
提示 : 
这 种 方式 生成 的 原型 网 址 = 云 应 用 的 网 址 + 原型 文件 夹 名 称 + 原 型 文件 名 称 。 


如 果 原 型 项 目 是 用 中 文 命 名 的 ， 那 么 原型 网 址 中 就 可 能 带 有 中 文 。 带 中 文 的 网 址 不 方便 分 享 ， 所 以 推荐 大 家 用 英文 命名 原型 项 目 。 


如 果 一 定 要 用 中 文 命 名 ， 最 好 将 网 址 转换 为 “ 短 链接 ”， 再 与 他 人 分 享 。 


9.3 ”案例 19: H5 小 测试 


局 感 咒 必 心理 测试 


用 H5 小 游戏 做 营销 活动 已 经 十 分 普 裔 了 。 因 此 设计 H5 小 游戏 成 为 了 产品 经 理 常 会 遇 到 的 任务 。 由 于 H5 小 游戏 主要 是 运行 在 手机 上 的 ， 所 以 很 适合 


成 手机 可 访问 的 原型 。 


下 面 以 “色彩 感觉 心理 测试 ”为 例 (如 图 9-15 所 示 ) ， 介 绍 如 何 设 计 手 机 上 可 以 访问 的 原型 。 


ke 忆 庆 站 Fi ke 
你 有 强大 的 色相 辨识 度 吗 ? X ”测试 结果 -你 有 毕加索 水 平 的 .. 


1/7 为 了 使 渐变 看 起 来 最 自然 ， 空 白 处 应 mr 


面 直 ™ 


一 os 2 
1 2 3 4 ¥y 


该 是 什么 颜色 


何 人 et 准 风 
恬 溃 优 表 的 色彩 感觉 竺 有 省 


你 是 世界 前 5% 水 准 的 非常 优秀 的 色 3 彩 感 
觉 持 有 者 。 

器 好 惊 着 名 男 家 和 半 加 这 和 闻 高 ， 你 的 包 
彩 层次 感 非常 的 优秀 ， 各 种 颜色 对 你 都 
有 特殊 的 意义 ， 你 的 审美 水 平 也 超越 了 
一 般 人 。 你 可 以 运用 在 色彩 世界 里 的 优 
劳 ， 继 续 探 索 ， 创 造 出 充 清 想 贸 力 的 新 


a ) 做 测试 是 b ) 测试 结果 


图 9-15 ”原型 效果 


9.3.1 ”制作 测试 题 


测试 原型 一 般 由 “做 测试 题 ” 和 “测试 结果 ”两 部 分 组 成 。 用 户 在 “测试 题 ”部 分 碍 看 题目 ， 选 择 选 项 ， 在 “测试 结果 ”部 分 根据 用 户 选择 显示 结 


果 。 
(1) 在 原型 中 分 别 创建 两 个 页 面 ， 如 图 9-16 所 示 。 
提示 : 


页 面 的 标题 会 显示 在 浏览 器 的 标题 栏 中 ， 如 图 9-17 所 示 。 页 面 标题 也 是 产品 的 一 部 分 ， 需 要 花心 思 设 计 这 里 的 文案 。 


做 


由 
X ”你 有 强大 的 色相 辨识 度 吗 ? 


图 9-17 页 面 标题 


(2) 做 测试 题 时 ， 应 该 尽快 咽 应 用 尸 的 点 击 操作 ， 让 做 题 过 程 更 流畅 。 最 好 不 要 每 做 一 道 题 就 加 载 一 个 新 页 面 ， 可 以 用 动态 面板 来 实现 题目 的 切 
换 ， 如 图 9-18 所 示 。 创 建 动态 面板 “题目 ”，“ 题 目 ”面板 中 放置 相关 的 信息 ， 宽 度 控制 在 360 像 素 以 内 。 


(3) 在 “题目 ”面板 中 ， 添 加 7 个 状态 ， 每 个 状态 对 应 一 道 题目 ， 如 图 9-19 所 示 。 


0 Li | LT | | Wy | 
- |17 为 了 使 渐变 看 起 来 最 自然 ， 空 白 处 应 
] | 该 是 什么 颜色 
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1 2 3 4 


图 9-18 动态 面板 


4 坊 题 目 (动态 面板 ) 
A 1 


图 9-19 “题目 ”面板 


(4) 在 选项 按钮 的 属性 标签 中 ， 选 择 “鼠标 按 下 ”的 区 互 样式 设置 ， 给 按钮 设置 点 击 状态 ， 如 图 9-20 所 示 ， 鼠 标 按 下 时 改变 字 色 、 边 缘 线 颜色 和 填 
充 色 。 


(5) 在 选项 按钮 的 “鼠标 单 击 时 ”事件 中 添加 两 个 用 例 ， 如 图 9-21 所 示 。 


. 用 例 1 的 条 件 是 “题目 ”面板 状态 等 于 “7”， 即 用 户 已 经 做 到 最 后 一 题 。 用 例 中 设置 打开 链接 动作 。 用 户 做 完 最 后 一 题 立 即 跳 转 到 “测试 结果 ”页 


: 用 例 2 的 条 件 是 IfTrue， 也 就 是 所 有 情况 下 都 要 执行 用 例 2。 在 用 例 中 添加 动作 设置 面板 状态 。 每 次 用 户 点 击 选项 后 ， 都 将 “题目 ”面板 切换 到 下 一 


个 状态 ， 看 下 一 道 题 。 


(6) 设置 “页 面 排 列 ” 方 式 为 “居中 ”。 


正 本 
目 s 一 一 一 


| 
边框 可 见 性 = 


_ 转 | 贺 角 半 符 0 


圆 角 可 见 性 = 


”加 | 不 透明 (%) 100 


mt | | 


预览 


图 9-20 设置 交互 样式 


4 “时 鼠标 单 击 时 


A Case1 
(lf 面板 状态 于 题目 == 7) 
多 在 当前 窗口 打开 测试 结果 


毕 加 计 水平 的 色彩 感觉 


A 号 Case 1 
(lf True ) 


多 设置 题目 为 Next 


图 9-21 “鼠标 单 击 时 ”事件 用 例 
提示 : 


本 页 面 在 手机 上 查看 时 ， 最 后 一 个 选项 紧 贴 着 屏幕 底部 ， 比 较 难 看 。 可 以 在 最 后 一 个 选项 下 方 添加 一 个 透明 的 水 平 线 元 件 。 相 当 于 在 页 面 底部 增加 了 
一 段 空 白 区 域 ， 看 起 来 更 美观 。 


9.3.2 ”制作 测试 结果 


本 例 中 没有 记录 用 户 的 选择 ， 所 以 不 根据 选项 显示 测试 结果 ， 只 显示 一 个 固定 的 结果 页 面 作为 示意 。 
(1) 在 测试 结果 页 面 中 ， 添 加 图 片 和 文字 元 件 组 成 结果 说 明 ， 宽 度 控 制 在 360 像 素 以 内 。 
(2) 设置 “页 面 排列 ”方式 为 “居中 ”方式 。 


(3) 在 页 面 底部 添加 “再 试 一 次 ”按钮 ， 在 按钮 的 “鼠标 单 击 时 ”事件 中 添加 动作 打开 链接 ， 当 用 户 点 击 该 按钮 时 跳 转 回 做 题 页 面 ， 如 图 9-22 所 


告 果 - 你 有 上 毕 加 系 水 平 的 色彩 感觉 x 你 
lo 1154 130 


“ 你 有 强大 的 色相 辨识 度 吗 ? 
芋 加 率 水 平 的 色彩 
感觉 


| “二 三 二 殖 吕 案 欢 引 名 站 
-人 殉 但 彩 感 顺 | 


» 你 是 世界 前 5 以 水 准 的 
| 


A Me 了 党 优秀 的 色彩 感觉 持 有 着 4 “由 鼠标 单 击 时 
-| RR A 起 Case1 


你 是 世界 前 5% 水 准 的 非常 优秀 的 色彩 感 中 在 当前 窗口 打开 你 有 强大 的 色 
觉 持 有 者 。 相 状 识 度 吗 ? 
就 好 像 著名 画家 毕加索 和 苛 高 ， 你 的 色 
彩 层次 感 非常 的 优秀 ， 各 种 颜色 对 你 都 
有 特殊 的 意义 ， 你 的 什么 水 平 也 超越 了 
fi 一般人。 你 可 以 运用 在 色彩 世界 里 的 优 
势 ， 继 续 探索 ， 创 造 出 充满 想象 力 的 新 


图 9-22 ”测试 结果 


9.3.3 ”设置 视 口 标签 


制作 出 原型 页 面 后 ， 开 始 设置 视 口 标签 。 本 例 中 没有 特殊 的 缩放 需求 ， 按 9.1.2 节 中 的 默认 设置 即 可 。 

(1) 单 击 “ 发 布 ”按钮 ， 在 弹出 的 菜单 中 选择 “预览 选项 ”命令 。 

(2) 在 弹出 的 “预览 选项 ”界面 中 ， 单 击 “ 配 置 ” 按 钮 ， 打 开 配 置 界面 。 

(3) 勾 选 “包含 视 口 标签 ” 复 选 框 ， 并 将 “宽度 ” 设 为 device-width，“ 初 始 缩放 倍数 ” 设 为 1.0， 如 图 9-23 所 示 。 
RP 生成 HTML< HTML 1» 

页 面 

页 面 说 明 包含 视 口 标 等 


元 件 说 明 宽度 (px 或 者 device-width ) device-width 
区 旺 高 度 ( px 或 者 device-height) | 


标志 


|IWeb 字 体 | 
字体 映射 最 小 纺 放 倍数 (0-10.0) 


移动 设备 最 大 缩放 倍数 (0-10.0) 

高 级 允许 用 户 缩放 (no 或 blank) 
禁止 页 面 垂 直 滚 动 
目 动 检测 并 链接 电话 号 码 (iOS) 


初始 缩放 倍数 (0-10.0) 


图 9-23 ”设置 视 口 标签 选项 


9.3.4 友和 布 


设置 好 原型 尺寸 与 视 口 标签 后 ， 原 型 制作 部 分 就 完成 了 。 将 原型 友 布 到 Axure Share 平 台 即 可 获得 能 在 手机 上 打开 的 分 享 链 接 。 
(1) 单 击 “ 友 布 ”按钮 ， 在 弹出 的 菜单 中 选择 “ 友 布 到 Axshare” 命令。 
(2) 在 弹出 的 对 话 框 中 ， 选 择 “ 创 建 一 个 新 项 目 ” 单 选 按钮 ， 项 目 名 称 设置 为 “色彩 测试 ”， 如 图 9-24 所 示 。 


(3) 单 击 “ 帮 布 ”按钮 ， 获 得 原型 链接 ， 如 图 9-25 所 示 ， 勾 选 “ 不 加 载 工具 栏 ” 复 选 框 。 


pp 点 布 到 AxUre Share 


可 置 HTML 1 (default) 喘 引 


篇 ) 创建 一 个 靳 项 目 


名 和 


图 9-24 ”创建 新 项 目 


,作对 |AXUre share 


您 的 Axure Share 厚 型 页 面 链 接 为 : 
http://srkaQvg.axshare. com/#c=2 
不 加 载 工 具 栏 


您 可 以 继续 使 用 AxXure RP 友 布 。 


友人 向 成 功 ! 


图 9-25 ”原型 链接 
(4) 复制 生成 的 链接 发 给 自己 ， 打 开 链 接 即 可 查看 原型 。 
提示 : 
在 浏览 器 中 打开 原型 链接 时 ， 利 用 浏览 器 的 “添加 到 主屏 幕 ” 功 能 ， 可 以 将 原型 保存 到 手机 桌面 上 ， 以 后 可 以 随时 打开 查看 。 


桌面 上 原型 的 图 标 可 以 通过 HIML1 配 置 ”| “移动 设备 ”| “导入 主屏 图 标 ” 功 能 进行 设置 。 


第 10 章 ”和 母 版 


如 果 原 型 中 有 多 个 页 面 都 要 用 到 某 个 相同 的 模块 ， 则 可 以 把 这 个 模块 做 成 母 版 。 需 要 用 到 这 个 模块 时 ， 直 接 把 母 版 插入 到 页 面 中 即 可 。 


相 比 直接 在 各 个 页 面 复制 、 粘 贴 元 件 ， 使 用 母 版 可 以 做 到 统一 管理 ， 重 复 使 用 。 人 和 修改 母 版 时 ， 所 有 用 到 该 母 版 的 页 面 都 会 随 之 自动 改变 ， 省 去 了 逐个 
修改 的 麻烦 。 


10.1 创建 母 版 


创建 母 版 有 两 种 方法 一 一 在 母 版 栏 直 接 添加 ， 或 者 将 元 件 转 换 为 母 版 。 有 经 验 的 设计 者 一 般 用 第 一 种 方法 ， 没 有 经 验 的 设计 者 都 是 在 原型 设计 过 程 
中 才 友 现 有 些 元 件 可 以 转换 为 母 版 。 


10.1.1 在 母 版 栏 直 接 添 加 


添加 母 版 与 添加 页 面 类 似 。 母 版 较 多 时 可 以 新 建文 件 夹 ， 按 文件 夹 给 母 版 分 类 。 母 版 再 多 时 ， 可 以 通过 搜索 功能 搜索 要 得 找 的 母 版 。 


(1) 在 母 版 栏 单 击 “ 添 加 母 版 ”按钮 ， 如 图 10-1 所 示 ， 即 可 创建 母 版 。 


(2) 双击 母 版 名 称 即 可 进入 母 版 页 面 ， 如 图 10-2 所 示 。 


图 10-1 添加 母 版 


新 母 版 1 Index 
0 


图 10-2 ” 怀 版 页 面 


(3) 在 母 版 页 面 中 ， 可 以 任意 添加 、 修 改元 件 。 


(4) 母 版 页 面 只 有 “属性 ” “说明” 标签 ， 没有“ 样式” 标签， 如 图 10-3 所 示 ， 所 以 在 母 版 中 不 能 设置 页 面 样式 


“车 ” 窗 口 滚动 时 


更 多 事件 >>> 


自 适应 


图 10-3 母 版 页 面 


10.1.2 ”将 元 件 转 换 为 母 版 


将 元 件 转换 为 母 版 与 转换 为 动态 面板 类 似 ， 但 母 版 需要 进一步 设置 名 称 和 拖 放行 为 。 而 且 母 版 中 元 件 的 交互 动作 也 会 受到 影响 。 
(1) 选择 元 件 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “转换 为 母 版 ”命令 ， 如 图 10-4 所 示 。 


(2) 在 弹出 的 对 话 框 中 可 以 设置 母 版 的 名 称 及 母 版 的 拖 放 行为 ， 如 图 10-5 所 示 。 


转换 为 母 版 (M)) 


转换 为 动态 面板 (D) 


图 10-4 ”选择 “转换 为 母 版 ”命令 
注意 : 与 这 些 元 件 关 联 的 交互 将 南 要 更 新 。 


图 10-5 “转换 为 母 版 ”对 话 框 


提示 : 
在 Axure RP 中 剪 切 一 个 元 件 ， 不 论 是 否 粘贴 回来 ， 所 有 引用 这 个 元 件 的 动作 都 会 失效 。 
将 元 件 转 换 为 母 版 时 ， 所 有 引用 这 个 元 件 的 动作 也 会 失效 。 可 能 是 在 转换 时 ， 将 元 件 剪 切 、 煌 贴 到 新 的 母 版 中 导致 的 。 


将 元 件 转换 为 动态 面板 时 ， 没 有 经 历 剪 切 的 过 程 ， 不 会 导致 引用 这 个 元 件 的 动作 失效 。 


10.2 ”使 用 和 母 版 


一 般 ， 直 接 拖 擅 母 版 即 可 把 母 版 添加 到 画布 上 。 本 节 主 要 介绍 母 版 的 不 同 拖 放行 为 ， 以 及 如 何 查 看 使 用 情况 。 


10.2.1 拖 放 行为 


将 母 版 从 母 版 栏 拖 岛 到 画布 上 时 ， 根 据 不 同 的 设置 有 不 同 的 行为 。 


在 母 版 上 右 击 ， 在 弹出 的 快捷 菜单 中 ， 可 以 看 到 母 版 的 拖 放行 为 有 3 种 ， 如 图 10-6 所 示 。 

“ 任意 位 置 : 母 版 拖 到 画布 上 之 后 ， 可 以 任意 拖 动 改变 位 置 。 

: 国定 位 置 : 母 版 拖 到 画布 上 之 后 ， 不 能 拖 动 ， 只 能 留 在 创建 母 版 时 母 版 所 在 的 固定 位 置 。 
- 脱离 母 版 : 母 版 拖 到 画布 上 之 后 ， 分 散 成 一 个 个 元 件 ， 不 以 了 母 版 形式 留 在 画布 上 。 


添加 (A) 
移动 (M) 
图 ”删除 (D) 
重 命名 (R) 
重复 (C) 


拖 放 行为 (B) > | Y ， 任意 位 置 (P) 
固定 位 置 (D 
脱 高 母 版 (B) 


添加 到 页 面 中 ..(A) 
从 页 面 中 移 除 .…(R) 
使 用 情史 …(U) 


10.2.2 ”使 用 情况 


在 母 版 上 右 击 ， 在 弹出 的 快捷 荣 单 中 选择 “使 用 情况 ”命令 。 在 弹出 的 对 话 框 中 可 以 看 到 哪些 页 面 使 用 了 该 母 版 ， 如 图 10- 7 所 示 。 


删除 母 版 时 ， 如 果 母 版 正 被 使 用 ， 也 会 弹出 类 似 的 窗口 ， 如 图 10-8 所 示 。 正 在 使 用 中 的 母 版 无 法 删除 。 


INndex 


图 10-7“” 母 版 使 用 情况 1 


以 下 母 版 正在 使 用 不 能 删除 。 


新 母 版 1: 


Index 


图 10-8 母 版 使 用 情况 2 


10.3 ”案例 20: 利用 母 版 ， 解 决 “积分 商城 ”的 重复 建设 


在 页 面 较 多 的 原型 中 ， 常 党 要 用 到 母 版 。 例 如 ， 电 商 网 站 中 的 顶部 导航 栏 、 页 面 底部 栏 在 各 个 页 面 中 都 是 相同 的 ， 如 图 10-9 所 示 。 
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图 10-9 ” 电 商 网 站 原型 


下 面 以 一 个 积分 商城 为 例 ， 介 绍 这 类 原型 如 何 利 用 和 母 版 提高 效率 。 


10.3.1 导航 栏 


导航 栏 十 分 常见 ， 常 用 于 展示 网 站 的 所 有 分 类 。 网 站 的 首页 、 分 类 页 等 许多 页 面 都 需要 导航 栏 ， 以 便 用 户 随 时 访问 其 他 类 别 的 资源 。 
(1) 用 起 形 和 文字 元 件 在 页 面 顶部 摆好 导航 栏 ， 如 图 10-10 所 示 。 


这 地 


管理 当前 积分 :0 总 托 


节 特 供 入 职 人 礼包 超市 购物 卡 积分 转换 


图 10-10 “和 寻 航 栏 


(2) 将 组 成 导航 栏 的 元 件 一 起 转换 为 母 版 ， 如 图 10-11 所 示 。 将 母 版 合 名 为 “导航 栏 ”， 导 舰 栏 始终 保持 在 页 面 顶部 ， 所 以 可 以 将 母 版 的 拖 放 行为 


设置 为 “固定 位 置 ”。 


图 10-11 母 版 
(3) 双击 “导航 栏 ” 母 版 ,进入 母 版 页 面 。 在 分 类 按钮 上 添加 热 区 元 件 ， 如 图 10-12 所 示 。 
(4) 在 热 区 的 “鼠标 单 击 时 ”事件 中 添加 动作 一 打开 链接 ， 如 图 10-13 所 示 ， 并 设置 链接 到 相应 的 页 面 上 。 
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Default 
Y 基本 元 件 


窟 形 1 


4 用 (动态 面板 ) 
A 5 Statel 


图 10-13 ” 单 击 热 区 打开 链接 


(5) 这 样 ， 在 任意 页 面 上 单 击 导航 栏 上 的 分 类 ， 都 能 跳 转 到 该 分 类 的 页 面 。 


10.3.2 ”弹出 采 早 

导航 栏 中 如 果 有 二 级 分 类 ,或 常用 功能 需要 一 个 快速 访问 的 列表 ， 那 么 可 以 在 导航 栏 中 添加 弹出 菜单 ， 展 示 二 级 分 类 或 快速 列表 。 本 例 中 用 弹出 菜单 
做 了 一 个 购物 车 的 商品 列表 。 

(1) 在 母 版 中 用 算 形 、 文 字 、 图 片 元 件 组 成 购物 车 弹出 菜单 ， 如 图 10-14 所 示 。 


(2) 将 组 成 购物 车 菜单 的 元 件 一 起 转换 为 动态 面板 ， 将 其 命名 为 “购物 车 ”并 设 为 隐藏， 


如 图 10-15 所 示 。 在 “购物 车 ”按钮 处 添加 热 区 元 件 。 


i 


当前 积分 :0 葛 托 购物 车 


图 10-14 ”购物 车 菜单 


隐藏 的 
动态 面板 


图 10-15 ”隐藏 面板 


(3) 在 热 区 的 “鼠标 单 击 时 ”事件 中 添加 动作 
会 自动 将 面板 置 于 顶层 ,不 被 页 面 上 其 他 元 件 所 遮挡 ，。 


显示 ， 显 示 “ 购 物 车 ”面板 。 在 “更 多 选项 ”中 选择 “弹出 效果 ”， 如 图 10-16 所 示 。 弹 出 效果 


配 壮 动 作 

i 隐 梳 成 显示 的 元 件 

童 大 [| 隐 芍 未 命名 的 元 件 
冒 | 当前 元 件 

用 |v| 购物 车 (动态 画板) 显示 弹出 效果 


可 见 性 ”二 显示 六 隐藏 ”人 〇 切换 
动 团 | 无 “| 时 间 500 至 秒 
加 置 于 项 层 


更 全 选 项 ”弹出 效果 


图 10-16 ”选择 “弹出 效果 ” 


(4) 这 样 ， 在 任意 页 面 上 单 击 购物 车 按钮 ， 都 会 在 弹出 购物 车 菜单 。 姐 标 光 标 移 开 后 ， 菜 单 即 消失 。 


10.3.3 ”底部 栏 


底部 栏 通 常用 于 放置 服务 协议 、 联 系 方式 和 版 权 说 明 等 信息 。 网 站 中 几乎 所 有 的 页 面 都 需要 底部 栏 以 便 用 户 随 时 查看 这 些 信息 ， 并 声明 每 一 页 的 版 
权 。 


(1) 在 底部 栏 母 版 中 添加 元 件 即 可 ， 不 需要 设置 交互 动作 ， 如 图 10-17 所 示 。 
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图 10-17 ”底部 栏 
(2) 注意 底部 栏 在 各 个 页 面 上 的 位 置 可 能 不 同 ， 所 以 要 将 母 版 的 拖 放 行为 设 为 “任意 位 置 ”。 
提示 : 


在 了 母 版 列表 中 ， 不 同 拖 放行 为 的 母 版 ， 其 图 标 是 不 同 的 。 


10.3.4 ”使 用 母 版 


下 面 来 看 看 将 已 做 好 的 母 版 “导航 栏 ” “底部 栏 ” 用 在 原型 中 的 效果 ， 再 预览 原型 查看 母 版 的 交互 效果 。 
(1) 直接 将 母 版 拖 蝶 到 各 个 页 面 的 画布 上 即 可 使 用 该 母 版 ， 如 图 10-18 所 示 。 
提示 : 


“顶部 栏 ”是 固定 位 置 的 。 选 中 “顶部 栏 ”时 ， 母 版 会 显示 红色 的 边缘 线 ， 提 示 无 法 改变 母 版 的 位 置 。 
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图 10-18 使 用 母 版 


(2) 预 抱 原型 时 ， 单 击 购 物 车 按钮 ， 会 弹出 购物 车 商品 列表 。 


(3) 将 母 版 插入 其 他 所 有 页 面 。 删 除 母 版 时 ， 会 弹出 “ 母 版 使 用 情况 ”对 话 框 ， 其 中 列 出 了 所 有 引用 这 个 母 版 的 页 面 ， 如 图 10-19 所 示 。 


PP 母 版 使 用 情况 


以 下 母 版 正在 使 用 不 能 删除 。 
底部 栏 : .| 
恒利 积分 商城 
”商品 列表 
入 职 礼包 
年 节 特 供 
“商品 详情 
购物 车 
”结算 
充值 
送 福 利 
”积分 转换 
我 的 订单 
订单 详情 


第 11 章 ”元 件 库 


在 第 1 章 中 介绍 的 元 件 都 属于 Axure RP 自 带 的 默认 元 件 库 。Axure RP 用 户 可 以 创建 满足 自己 需求 的 元 件 ， 甚 至 创建 自己 的 元 件 库 。 本 章 将 介绍 如 何 创 
建 和 使 用 自 定义 的 元 件 库 ， 并 介绍 一 些 常 用 元 件 的 创建 方法 。 


11.1 使 用 元 件 库 


在 学 习 创 建 元 件 库 之 前 ， 先 来 学 习 如 何 下 载 、 使 用 网 友 共 享 的 元 件 库 ， 拥 有 多 个 元 件 库 时 如 何 切换 使 用 元 件 库 。 


11.1.1 下 载 元 件 库 


如 果 默 认 的 元 件 库 无 法 满足 需求 ， 可 以 在 Axure RP 的 官网 下 载 更 多 元 件 库 。 在 Axure RP 官网 上 ， 有 的 元 件 库 包含 多 个 常用 图 标 ， 如 图 11-1 所 示 。 有 
的 元 件 库 包含 iOS 或 Android 风 格 的 控件 ， 有 的 是 针对 各 种 应 用 的 常用 模块 .….. 思 之， 元 件 库 的 种 类 非常 丰富 。 


© © @ © 


Select Select Al Paste 下 


图 11-1 种 类 丰富 的 元 件 库 


(1) 单 击 在 元 件 库 右上 和 角 的 按钮 ， 在 弹出 菜单 中 选择 “下 载 元 件 库 ” 命 令 ， 如 图 11-2 所 示 ， 束 会 打开 Axure 官 网 的 元 件 库 列表 。 


下 载 元 件 库 ..….(D) 


载 入 元 件 库 ...(L) 
从 Axureshare 载 入 元 件 库 .. 
创建 元 件 库 ...(C) 


WT Te 


许 接 技 钮 


图 11-2 下载 元 件 库 
提示 : 
元 件 库 文件 的 后 级 名 为 .tplib。 


(2) 元 件 库 文件 保存 在 任意 位 置 都 可 以 加 载 到 Axure RP 中 。 


11.1.2 ”加 载 元 件 库 


下 载 完 的 元 件 库 需 要 加 载 才能 在 Axure RP 中 使 用 。 单 击 元 件 库 右上 角 的 按钮 ， 在 弹出 菜单 中 : 
. 选择 “ 载 入 元 件 库 ” 命 令 ， 可 以 加 载 本 地 的 元 件 库 文件 。 


` 选择 “从 Axure Shatre 载 入 元 件 库 ” 命令， 可 以 加 载 之 前 传 到 Axute Shate 平 台 上 的 元 件 库 文 件 。 查 找 时 ， 可 以 输入 元 件 库 项 目 ID 或 通过 浏览 文件 夹 来 


选择 ， 如 图 11-3 所 示 。 
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图 11-3” ”加载 元 件 库 


11.1.3 ”切换 元 件 库 


单 击 元 件 库 上 的 下 拉 菜 单 ， 在 其 中 选择 想 要 使 用 的 元 件 库 ， 即 可 切换 使 用 该 元 件 库 ， 如 图 11-4a 所 示 。 


提示 : 


| 


一 般 直 接 把 元 件 库 中 的 元 件 拖 慢 到 画布 上 即 可 使 用 该 元 件 。 有 些 元 件 可 能 带 有 提示 信息 ， 单 击 该 元 件 右上 角 的 小 问号 即 可 查看 ， 如 图 11-4b 所 示 。 
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a ) 切换 元 件 库 b ) 提示 信息 


图 11-4 切换 元 件 库 


11.1.4 元件 库 的 其 他 操作 


加 载 新 的 元 件 库 乙 后 ， 可 以 对 新 的 元 件 库 进 行 编 辑 、 刷 新 和 印 载 ， 如 图 11-5 所 示 。 


下 载 元 件 库 .…(DD) 


戟 入 元 件 库 .…(LD 
从 AxUreshare 示 和 元 人 件 库 ... 


建 元 件 库 …(C) 
编辑 元 件 库 .….(E) 
刷新 元 件 库 (R) 
和 扼 载 元 件 库 (U) 


图 11-5 ”种 载 元 件 库 
" 编辑 元 件 库 : 打开 元 件 库 文件 进行 编辑 。 
- 刷新 元 件 库 : 重新 加 载 元 件 库 。 如 果 对 元 件 库 进行 了 修改 ， 会 把 修改 内 容 同 步 到 Axure RP 中 。 


` 卸载 元 件 库 : 取消 加 载 该 元 件 库 。 


11.2 创建 元 件 库 


本 节 介 绍 如 何在 Axure RP 中 创建 自己 的 元 件 库 ， 以 及 如 何在 元 件 库 中 添加 元 件 ， 编 辑 元 件 的 样式 、 图 标 等 。 
(1) 单 击 元 件 库 右上 角 的 按钮 ， 在 弹出 菜单 中 选择 “创建 元 件 库 ”命令 。 


(2) 在 弹出 的 对 话 框 中 ， 选 择 新 建 元 件 库 文件 的 保存 位 置 和 名 称 。 单 击 “ 保 存 ” 按 钮 后 ， 会 自动 打开 元 件 库 的 编辑 界面 ， 如 图 11-6 所 示 。 


元 件 库 


属性 栏 


在 元 件 库 页 面 面 板 中 双击 一 个 页 面 打 开 它 ， 


图 11-6 ”元件 库 编辑 界面 
(3) 元 件 库 编 辑 界面 与 原型 编辑 界面 类 似 ， 不 同 之 处 有 以 下 几 点 。 
- 页 面 : 界面 左上 角 是 元 件 库 页 面 窗口 。 元 件 库 的 页 面 与 原型 的 页 面 概念 不 同 。 这 里 的 一 个 页 面 对 应 了 一 个 元 件 库 栏 里 的 元 件 。 
` 样式 : 元 件 库 与 母 版 一 样 不 能 设置 “页 面 ” 样 式 。 
` 属性 : 元 件 库 的 “页 面 ”属性 栏 中 不 能 设置 交互 动作 。 可 以 设置 元 件 的 提示 信息 ， 以 及 元 件 库 中 元 件 的 缩 略图 。 


(4) 进入 “新 元 件 1” 页 面 ， 选 择 “ 属 性 ”标签 ， 如 图 11-7 所 示 。 


提示 信息 (显示 在 元 件 库 面板 ) 


自 适 应 回 启 用 坚 ， 


图 11-7 元 件 库 编 辑 界 面 
` 页 面 顶部 可 以 选择 使 用 页 面 缩 略图 作为 图 标 ， 或 者 导入 一 个 图 标 文件 。 
.页面 底部 可 以 设置 元 件 的 提示 人 信息。 提示 信息 会 展示 在 元 件 库 中 元 件 右上 角 的 小 问号 里 ， 如 图 11-4b 所 示 。 


(5) 在 “新 元 件 1” 页 面 中 添加 一 个 矩形 元 件 ， 选 中 该 元 件 ， 然 后 选择 “属性 ”标签 ， 如 图 11-8 所 示 。 元 件 的 “属性 ”和 “样式 ”设置 与 原型 界面 
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嘱 ”鼠标 单 击 时 
呢 鼠标 移入 时 


嘱 ”鼠标 移出 时 


更 多 事件 >>> 
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图 11-8 ”编辑 元 件 


(6) 单 击 “发 布 ” 按 钮 ， 弹 出 菜单 与 原型 界面 一 致 ， 如 图 11-9 所 示 。 元 件 库 发 布 到 Axure Share 平 台 上 之 后 ， 可 以 通过 “从 Axure Share 载 入 元 件 
库 ” 命 令 加 载 到 Axure RP 中 。 


(7) 在 一 个 新 建 原 型 中 加 载 这 个 元 件 库 ， 如 图 11-10 所 示 。 可 以 看 到 元 件 库 中 有 一 个 元 件 “ 新 元 件 1”。 缩 略图 上 是 一 个 “确定 按钮 ”。 单 击 “ 新 元 
件 1” 右 上 角 的 小 问号 会 弹出 提示 信息 。 


预 所 F5 
预 移 选项 …(O 〇 ) Ctrl+F5 
点 筒 到 AxSha re...(A) F6 


牛 成 HTML3W 件 ...(H) F8 
人 在 HTMLX 件 中 重新 生成 当前 页 面 (R) Ctrli+F8 
生成 Wordi 史 明 书 ...(G) 


图 11-9 ”发 布 元 件 库 


图 11-10 ”使 用 元 件 库 


11.3 ”案例 21: 自 定义 元 件 库 


前 两 节 已 经 介绍 了 元 件 库 的 使 用 、 创 建 等 基本 操作 。 下 面 应 用 这 些 操作 ， 做 一 个 自 定义 的 元 件 库 并 添加 一 些 常 用 元 件 。 


11.3.1 手机 EE 


做 APP 原 型 时 经 常 要 用 到 “手机 外 框 ”。 只 要 简单 地 组 合 默 认 元 件 ， 束 能 做 出 “手机 外 框 ” 元 件 。 
(1) 新 建 一 个 元 件 库 ， 命 名 为 “常用 移动 端 元 件 ”。 
(2) 添加 一 个 页 面 ， 命 名 为 “手机 外 框 ”。 


(3) 在 页 面 中 用 算 形 和 椭圆 形 组 成 手机 外 框 ， 如 图 11-11 所 示 。 
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图 11-11 手机 外 框 


11.3.2 按钮 


默认 元 件 中 有 “按钮 ”元 件 , 但 “按钮 ”元 件 缺 少 交 互 样式 。 在 默认 元 件 的 基础 上 设置 合适 的 交互 样式 ， 就 可 以 组 成 新 的 “按钮 ”元 件 。 
(1) 添加 一 个 新 页 面 ， 命 名 为 “按钮 ”。 
(2) 在 按钮 页 面 增加 一 个 和 矩形， 将 矩形 上 的 文字 改 为 “确定 ”， 如 图 11-12 所 示 ， 并 设置 按钮 的 颜色 。 


(3) 设置 按钮 的 交互 样式 ， 如 图 11-13 所 示 。 


鼠标 按 下 : 将 按钮 的 填充 色 和 边缘 线 的 颜色 加 深 。 


图 11-12 添加 按钮 


选择 形状 r 


交互 样式 设置 
标 晨 停 Outer shadow2250 


时 标 控 下 #0099FF; #0099FF; 


图 11-13 设置 交互 样式 


11.3.3 ”搜索 框 


搜索 是 APP 中 常见 的 功能 ， 一 般 以 搜索 框 或 搜索 按钮 的 形式 出 现 ， 两 者 的 交互 类 似 单 击 后 会 进入 搜索 页 面 。 
(1) 添加 一 个 新 页 面 ， 命 名 为 “搜索 框 ”。 


(2) 在 页 面 中 添加 起 形 、 李 圆 形 、 水 平 绪 元 件 ， 组 成 搜索 框 ， 如 图 11-14 所 示 。 


按钮 手机 四 框 
100 


图 11-14 ”添加 搜索 框 


11.3.4 ”人 饼 状 图 


图 表 做 起 来 比较 复杂 ， 如 果 将 常见 的 折线 图 、 柱 状 图 、 饼 状 图 等 添加 为 元 件 库 中 的 元 件 ， 做 原型 时 效率 会 更 高 。 
(1) 添加 一 个 新 页 面 ， 命 名 为 “ 饼 状 图 ”。 


(2) 在 页 面 中 添加 4 个 饼 状 图 元 件 ， 组 成 一 个 完整 的 饼 状 图 ， 如 图 11-15 所 示 。 


搜索 框 按钮 手机 外 框 
0 100 200 


100 


图 11-15 ”搜索 框 


11.3.5 评论 


大 多 数 资 源 类 、 电 商 类 、 社 区 类 产品 都 有 评论 功能 。 做 评论 模块 要 用 到 很 多 头像 、 了 昵称 等 素材 。 把 评论 做 成 元 件 库 中 的 元 件 ， 能 省 去 不 少 采 烦 。 
(1) 添加 一 个 新 页 面 ， 命 名 为 “评论 ”。 


(2) 在 “评论 ”页 面 中 ， 添 加 图 片 、 文 字 等 元 件 组 成 一 个 评论 列表 ， 如 图 11-16 所 示 。 


评论 X | 全 状 殿 搜 奈 框 按钮 手机 ,让 框 


129 


250 


375 


125 250 


在 课堂 上 ， 我 是 说 老人 活 不 过 73 或 84 ， 当 时 我 就 中 了 ， 
稼 迁 已 经 79 高 龄 了 ， 我 真 的 好 怕 ， 害怕 节 移 就 这 么 悄悄 
离开 了 ， 大 家 请 为 我 的 节 区 祈福 ， 视 区 他 长 命 百 岁 


国 为 都 是 常见 的 乐 西 ， 没 有 需要 动画 才能 交代 清楚 的 父 
互 


8- 


必须 打 赏 ! 


1 关 女 小 天 


”请 问 提 取 密 码 是 多少 ? 


图 11-16 添加 “评论 ”页面 


11.3.6 ”查看 元 件 库 


保存 创建 好 的 元 件 库 文件 ， 然 后 在 一 个 新 原型 中 加 载 这 个 元 件 库 即 可 直接 使 用 。 加 载 元 件 库 的 样子 如 图 11-17 所 示 。 


元 件 库 


常用 移动 端 元 件 


Y 党 用 攀 动 闻 元 件 


图 11-17 元 件 库 


在 平时 的 工作 中 ， 可 以 每 做 一 个 原型 都 把 原型 中 常用 的 模块 添加 到 元 件 库 中 。 积 累 一 段 时 间 之 后 ， 束 会 拥有 一 个 完备 的 元 件 库 了 。 


第 12 草 ”团队 协作 


Axure RP 8.0 之 前 的 版 本 只 能 基于 SVN 创 建 团队 项 目 ， 所 以 使 用 团队 功能 的 人 不 多 。Axure RP 8.0 推 出 了 基于 Axute Share 平 人 台 的 团队 项 目 功 能 ， 使 用 非 
常 便 捷 ， 值 得 一 用 。 本 章 就 来 介绍 如 何 使 用 团队 项 目 功能 ， 进 行 团队 协作 。 


12.1 团队 项 目 介 绍 


团队 项 目 功能 核心 的 逻辑 是 : 
. 共享 。 在 Axshatre 平 台 上 创建 一 个 “团队 项 目 ”。 团 队 的 成 员 通 过 项 目 ID 访 问 项 目 。 


. 使 用 权 。 想 修改 原型 时 ， 将 要 用 到 的 页 面 “ 签 出 ”， 获 得 页 面 的 使 用 权 。 修 改 之 后 ， 再 将 页 面 “ 签 入 ”， 归 还 页 面 使 用 权 。 同 一 时 间 只 有 一 个 人 可 
以 获得 使 用 权 ， 让 团队 的 修改 不 会 相互 影响 。 


记录。 修改 原型 后 需要 写 好 修改 说 明 。 其 他 人 查看 说 明 时 ， 可 以 随时 了 解 项 目的 进展 。 


这 样 团队 成 员 分 工 协作 ， 项 目 残 可 以 顺利 进行 了 。 


12.2 创建 团队 项 目 


假设 某 人 已 经 制作 出 了 一 个 原型 的 草稿 ， 希 望 接 下 来 由 团队 成 员 一 起 来 完善 ， 那 么 他 应 该 创建 一 个 团队 项 目 ， 将 原型 共享 给 团队 成 员 。 
(1) 打开 已 经 做 出 了 几 个 页 面 的 原型 。 


(2) 打开 “团队 ”菜单 ， 选 择 “ 从 当前 文件 创建 团队 项 目 ” 命 令 ， 如 图 12-1 所 示 。 


文件 (F) 编辑 ([E) 视图 (V) 项 目 (P) 布局 (A) 发 布 (D) 
[下 从 当前 文件 创建 团队 项 目 .…(C) 
ls 

六 性 


获取 并 打开 团队 项 目 (G) 


Default 


[| 用 户 增 

[ 1 用 户 属 

4 [| 单 篇 好 
[i wi 


门 全 部 又 


”浏览 团队 项 目 历史 记录 .…(B) 
Default 


w 基本 元 件 


图 12-1 团队 菜单 
(3) 在 弹出 的 对 话 框 中 ，“ 团 队 项 目 位 置 ”选择 Axure Share，“ 团 队 项 目 名 称 ” 填 写 “ 公 众 号 后 台 ”， 如 图 12-2 所 示 。 


. 本 地 目录 : Axure Share 平 台 上 的 项 目 文件 是 团队 共享 的 ， 而 本 地 目录 中 的 项 目 文件 是 自己 的 。 只 有 将 共享 的 项 目 文件 下 载 到 本 地 才能 进行 修改 。 注 


意 ， 一 个 目录 只 能 存放 一 个 项 目 。 


URL 加 密 : 这 个 密码 是 指 打开 原型 网 址 的 密码 。 


(4) 单 击 “创建 ”按钮 后 ， 会 将 本 地 文件 上 传 到 Axure Share 平 台 。 上 传 之 后 ， 会 弹出 对 话 框 提示 团队 项 目 已 创建 ， 如 图 12-3 所 示 。 
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- 国 队 项 目 名 称 


CsersynniDocuments\Axure\Team Projects 


- URL 加 密 
为 团队 项 目的 HTML 和 链接 添加 密码 保护 ， 


图 12-2 “创建 团队 项 目 ” 对 话 框 


图 12-3 团队 项 目 创建 成 功 


12.3 ”获取 团队 项 目 文件 


团队 中 一 个 成 员 创 建 完 项 目 之 后 ， 其 他 成 员 就 可 以 获取 团队 项 目 了 。 获 取 团 队 项 目的 本 质 就 是 获取 团队 项 目 文 件 。 


12.3.1 ”查看 团队 项 目 ID 


其 他 成 员 获 取 团队 项 目前 ,创建 者 首先 要 把 项 目 1D 分 享 出 来 。 项 目 ID 是 创建 团队 项 目 时 自动 生成 的 一 段 字 母 。 


(1) 创建 团队 项 目 完成 之 后 ， 打 开 “ 团 队 ” 菜 单 ， 选 择 “ 管 理 团队 项 目 ” 命 令 ， 如 图 12-4 所 示 。 


ilies esi ills lel HE rr FP 


J 签 入 全 部 (|) 
撤销 所 有 签 出 (U) 


长 的 更 新 


习 。 从 团队 目录 获取 用 户 夫 


Ah 签 出 用 户 栏 


2 浏览 团队 项 目 历史 记录 .…(B) 


图 12-4 选择 “管理 团队 项 目 ” 命 令 


(2) 在 弹出 的 “管理 团队 项 目 ” 对 话 框 中 ， 可 以 在 团队 项 目的 网 址 中 看 到 团队 项 目的 ID， 如 图 12-5 所 示 。 


全 


团队 共享 目录 : https://share.axure.com/versions/FNYPG3 


点 击 下 方 按钮 更 新 团队 项 目 中 的 页 面 、 母 版 和 文档 属性 的 状态 。 右 键 单 击 条 目 可 以 等 入 、 签 出 ， 并 且 获 取 更 
新 。 点 击 标题 可 以 排序 浏 宛 。 


类 型 名 称 ;的 状 居 团队 目录 状态 。 需要 获取 变更 需要 提交 变更 


图 12-5 ”查看 团队 项 目 ID 


12.3.2 ”获取 团队 项 目 


获取 团队 项 目 ID 之 后 ， 就 可 以 开始 获取 团队 项 目 了 。 在 Axure RP 中 提交 项 目 ID，Axure RP 会 自动 下 载 项 目 ID 对 应 的 团队 项 目 文 件 。 
(1) 在 团队 其 他 成 员 的 计算 机 上 打开 Axure RP， 新 建 一 个 空 的 原型 。 

(2) 打开 “团队 ”菜单 ， 选 择 “ 获 取 并 打开 团队 项 目 ” 命 令 ， 弹 出 对 话 框 如 图 12-6 所 示 。 

` 填写 团队 项 目 ID。 

. 选择 本 地 目录 。 


(3) 单 击 “获取 ”按钮 后 ， 会 目 动 从 Axure share 平 台 上 下 载 原型 文件 到 本 地 。 下 载 成 功 后 ， 弹 出 对 话 框 提示 团队 项 目 文件 获取 成 功 ， 如 图 12-7 所 
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-团队 项 目 位 置 


Axure Share 


Project ID: ‘fntpg3 


CAUsersyjinnkDocumentsWwxureVTeam Projects\1| 


图 12-6 “获取 团队 项 目 ” 对 话 框 


团队 项 目 公众 号 后 台 已 成 功 获取 。 


图 12-7 团队 项 目 文件 获取 成 功 


12.3.3 码 看 本 地 文件 


获取 团队 项 目 后 ， 可 以 在 本 地 得 看 到 团队 项 目的 文件 。 这 些 文件 是 团队 项 目 在 本 地 的 一 个 复制 版 本 。 
(1) 在 本 地 目录 中 可 以 看 到 多 了 一 个 新 的 文件 夹 。 文 件 夹 的 名 称 为 团队 项 目的 名 称 ， 如 图 12-8 所 示 。 
(2) 打开 这 个 文件 夹 ， 可 以 看 到 一 个 文件 和 一 个 文件 夹 ， 如 图 12-9 所 示 。 

DO_NOT_EDIT 文 件 夹 ， 这 个 文件 夹 中 存储 了 团队 项 目的 配置 信息 和 临时 文件 ， 请 不 要 随意 编辑 。 


. .tpptj 文 件 是 团队 项 目 文件 ， 以 后 直接 打开 这 个 文件 即 可 打开 团队 项 目 。 


> 文档 > Axure ， Team Projects 
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口 名 称 


和 公众 号 后 台 


图 12-8 本 地 文件 夹 


图 12-9 项目 文 件 


12.4 修改 团队 项 目 


在 团队 项 目 中 ， 只 有 获取 了 使 用 权 的 成 员 才 能 修改 页 面 。 团 队 可 以 随时 查看 所 有 页 面 正在 被 谁 使 用 ， 还 可 以 查看 所 有 成 员 的 修改 记录 。 


12.4.1 签 出 
签 出 一 个 页 面 就 是 获取 一 个 页 面 的 使 用 权 。 有 一 个 原型 页 面 的 使 用 权时 ， 才 能 修改 这 个 原型 页 面 。 


1. 未 签 出 时 无 法 修改 


获取 项 目 之 后 ， 查 看 原型 页 面 时 会 友 现 此 时 原型 是 无 法 修改 的 ， 页 面 上 多 了 一 个 蓝 色 的 获 形 标志 。 同 时 ， 画 布 右 上 角 会 出 现 “ 签 出 ”提示 ， 如 图 12- 
10 所 示 。 


2. 签 出 后 可 以 修改 


继续 上 文 的 案例 。 单 击 画 布 右上 角 的 签 出 按钮 后 ，Axure RP 会 在 Axure Share 平 台 上 将 项 目 中 的 这 个 页 面 标记 为 已 被 “ 签 出 ”。 签 出 后 的 页 面 可 以 
任意 修改 ， 该 页 面 上 的 标志 变 成 绿色 的 圆 形 ， 如 图 12-11 所 示 。 
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4] 文章 详情 
人 全 部 文章 


取消 关注 人 数 净 增 关注 人 数 


DO 
Default oh / 
日 #12.5% 日 #12.5% 
周 音 25% 


w 基本 元 件 
周 时 25% 


月 音 300% 月 300% 


' 消 关注 人 数 。” ” 净 增 人 人 数 系 积 


2016-6-9 至 2016-6-9 至 全 部 来 源 理 


图 12-10 “未 签 出 


3. 已 等 出 的 无 法 再 次 签 出 
页 面 被 一 个 人 签 出 后 ， 其 他 人 再“ 签 出 ”这 个 页 面 时 ,会 弹出 “无 法 签 出 ”提示 对 话 框 ， 如 图 12-12 所 示 。 对 话 框 中 会 列 出 所 有 无 法 签 出 的 页 面 ， 并 


列 出 当前 的 签 出 人 。 
对 于 无 法 签 出 的 页 面 ， 最 好 放大 继续 编辑 。 如 果 选 择 “强制 编辑 ”， 以 后 和 釜 入 时 可 能 会 导致 其 他 人 的 修改 被 覆盖 而 丢失 。 


图 12-11 签 出 页 面 的 标志 


以 下 页 面 或 母 版 已 签 出 。 
您 可 以 不 签 出 进行 编辑 ,但 无 法 保存 修改 。 同 时 ， 其 他 人 可 能 正在 编辑 这 些 内 容 ， 这 可 能 会 
导致 所 作 的 修改 被 履 瘟 和 丢失 。 不 推荐 这 样 操 作 ! 
到 页 面 / 母 版 /属性 签 出 人 | 放弃 编辑 

用 户 增长 jituoshitilivecn ||E 


强制 编辑 
全 部 用 弃 编 辑 
全 部 强制 编辑 


图 12-12 无 法 签 出 


12.4.2 提交 变更 


签 出 原型 页 面 后 ， 可 以 在 本 地 任意 修改 页 面 。 提 交 变 更 之 后 ,会 将 本 地 修改 同步 到 Axure Share 平 台 的 团队 项 目 中 。 
(1) 修改 之 后 ， 打 开 “ 团 队 ” 菜 单 ， 选 择 “ 提 交 所 有 变更 到 团队 目录 ”命令 。Axure RP 会 将 所 有 修改 更 新 到 Axure Share 平 台 上 的 项 目 文件 中 。 


(2) 提交 变更 时 ， 需 要 填写 “变更 说 明 ”， 如 图 12-13 所 示 ， 记 录 做 了 哪些 修改 ,方便 团队 成 员 了 解 项 目的 进展 。 


RP 提交 变更 


以 下 页 面 、 母 版 和 项目 属 性 的 变更 煞 同 步 到 团队 目录 。 
”页 面 母 版 居 性 | 
用 户 增长 


图 12-13 ”提交 变更 


12.4.3 ” 签 入 


签 入 一 个 页 面 就 是 归还 一 个 页 面 的 使 用 权 。 归 还 一 个 原型 页 面 的 使 用 权 后 ， 将 不 能 再 修改 这 个 原型 页 面 。 
(1) 打开 “团队 ”菜单 ， 选 择 “ 签 入 全 部 ”命令 ， 即 可 签 入 页 面 。 


(2) 签 入 与 提交 变更 不 同 。 签 入 代表 归还 页 面 的 使 用 权 ; 提交 变更 代表 将 修改 更 新 到 团队 项 目 。 如 不 提交 变更 直接 答 入 ，Axure RP 会 在 签 入 时 自动 


提交 变 


` 已 经 提交 过 变更 之 后 再 签 入 时 ，“ 签 入 ”对 话 框 中 会 提示 不 需要 填写 签 入 说 明 ， 如 图 12-14a 所 示 。 


. 修改 原型 之 后 直接 签 入 ， 在 “ 签 入 ”对 话 框 中 可 以 填写 签 入 说 明 ， 如 图 12-14b 所 示 。 


以 下 页 面 ， 母 版 和 项 目 属性 ， 将 被 签 入 。 以 下 页 面 ， 母 版 和 项 目 属 性 ， 将 被 签 入 。 
动作 页 面 / 母 版 / 必 性 动作 页 面 / 母 版 /属性 
签 入 用 户 增长 签 入 用 户 增长 


图 12-14 签 入 


(3) 签 入 后 ， 原 型 页 面 恢复 到 “未 签 出 ”状态 ， 页 面 上 的 标志 变 回 监 色 的 萎 形 ， 如 图 12-15 所 示 。 


仙 ] 用 户 居 性 


4 所 ] 单 篇 文章 
昌 | 又 章 详情 
所 | 全 部 文章 


图 12-15 ”提交 变 


12.4.4 历史 记录 


提交 变更 、 签 入 之 后 都 会 留 下 历史 记录 。 历 史记 录 中 会 按时 间 顺 序 标明 谁 对 原型 做 了 修改 ,修改 了 哪些 页 面 等 信息 。 


(1) 在 “团队 ”菜单 中 ， 选 择 


` 我 的 状态 : 我 的 签 入 、 签 出 状态 。 


` 团队 目录 状态 : 该 页 面 是 否 可 以 签 出 。 


- 需要 获取 变更 : 如 果 其 他 人 更 新 了 该 页 面 ， 我 就 需要 获取 变更 。 


.需要 提交 变更 : 如 果 修改 了 页 面 ， 则 需要 尽快 提交 变更 。 


提示 : 


如 果 没 看 到 数据 ， 可 尝试 单 击 “ 刷 新 ”按钮 ， 更 新 数据 。 


三 


团队 共享 目录 : https:iishare_axure.comiversionsaifnypg3 
点 击 下 方 按钮 更 新 团队 项 目 中 的 页 面 、 母 版 和 文档 属性 的 状态 。 右 键 单 击 条 目 可 以 等 入 、 签 出 ， 并 且 获 取 更 


新 。 点 击 标题 可 以 排序 浏览 。 


刷新 

Property 
Property 
页 面 
页 面 

| 由 面 
页 面 
页 面 
Property 


司 
四 | 


Property 


名 各 

CSV Report 1 
HTML 1 
文章 详情 

用 户 增长 
全 部 文章 

单 篇 文章 

用 户 属性 
Print 1 
Word Doc 1 


“管理 团队 项 目 ”命令 ,可 以 在 弹出 的 对 话 框 中 随时 查看 团队 项 目 中 各 页 面 的 状态 ， 


需要 获取 变更 


No 
No 
No 
No 
No 
MD 
No 
No 
Na 


“管理 团队 项 目 ” 对 话 框 


如 图 12-16 所 示 。 


页 面 状 态 


(2) 在 “团队 ”菜单 中 ， 选 择 “ 浏 览 团队 项 目 历史 记录 ”命令 ,可 以 在 弹出 的 对 话 框 中 随时 查看 团队 项 目的 签 入 、 签 出 记录 ， 如 图 12-17 所 示 。 


可 以 自 定义 时 间 段 获取 历史 记录 。 


历史 记录 的 签 入 说 明 中 包含 手动 输入 的 说 明文 字 ， 以 及 系统 自动 添加 的 页 面 修改 记录 。 


Rp 团队 项 目 历 史记 录 


oh iive er 


Axure Share SVN 


项 目 D FNYPG3 


| 
开始 日 期 | 2017/7/2 = 结束 日 期 | 2017/7/9 =| 全 部 日 期 ， 获取 
记录 .日期 | 作者 | 签 入 说 明 | 
3 2017/7/9 14:14:13 jituoshiti@live.cn 直接 签 入 -一 Check In 
2 201717 有 14:08:.16 jtuoshiti@live.cn 改 了 数字 一 - Send ] 
201717 9 14:01.28 jtuoshitil 人 ve.cn Team Project 公众 号 后 侣 | 


---- Check In Summary ---- 
[CHANGED] (Page) ”用 户 增 t 


导出 到 RP 文件 


图 12-17 查看 团队 项 目的 签 入 、 签 出 记录 


